Added minimal functionality for Robot teaching
- Added minimal HMI - Added possibility to open and close all chamber doors
This commit is contained in:
282
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiLineChart/Style.css
vendored
Normal file
282
Packages/Beckhoff.TwinCAT.HMI.Controls.14.4.1/runtimes/native1.12-tchmi/TcHmiLineChart/Style.css
vendored
Normal file
@@ -0,0 +1,282 @@
|
||||
/** Styles for all themes */
|
||||
|
||||
/* Style for the main element */
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart,
|
||||
.tchmi-line-chart {
|
||||
/* Prevent overflow if the border radius is huge */
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template,
|
||||
.tchmi-line-chart-template {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: grid;
|
||||
grid-template-rows: auto min-content;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-chart,
|
||||
.tchmi-line-chart-template-chart {
|
||||
width: calc(100% - 10px);
|
||||
height: calc(100% - 5px);
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
/* Same as legend margin! margin px is used in js code, too */
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-legend {
|
||||
position: absolute;
|
||||
width: calc(100% - 10px);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-legend-bottom {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
/* Same as chart margin! margin px is used in js code, too */
|
||||
margin: 5px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-legend-top {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
/* Same as chart margin! margin px is used in js code, too */
|
||||
margin: 5px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-legend-parent-element {
|
||||
position: relative;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-legend-checkbox {
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
float: left;
|
||||
margin: 3px;
|
||||
width: 13px;
|
||||
height: 13px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-legend-checkbox-color-element {
|
||||
position: relative;
|
||||
float: left;
|
||||
height: 2px;
|
||||
width: 10px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-legend-checkbox-label {
|
||||
position: relative;
|
||||
float: left;
|
||||
padding-right: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip,
|
||||
.tchmi-line-chart-template-tooltip {
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip .TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-text,
|
||||
.tchmi-line-chart-template-tooltip .tchmi-line-chart-template-tooltip-text {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-arrow,
|
||||
.tchmi-line-chart-template-tooltip-arrow {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 8px; /** used in internal calculation */
|
||||
height: 8px; /** used in internal calculation */
|
||||
transform: rotate(45deg);
|
||||
/*border-width: 6px;
|
||||
border-style: solid;*/
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-arrow-bottom,
|
||||
.tchmi-line-chart-template-tooltip-arrow-bottom {
|
||||
top: calc(100% - 4px);
|
||||
left: calc(50% - 4px);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-arrow-top,
|
||||
.tchmi-line-chart-template-tooltip-arrow-top {
|
||||
bottom: calc(100% - 4px);
|
||||
left: calc(50% - 4px);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-arrow-left,
|
||||
.tchmi-line-chart-template-tooltip-arrow-left {
|
||||
top: calc(50% - 4px);
|
||||
right: calc(100% - 4px);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-arrow-right,
|
||||
.tchmi-line-chart-template-tooltip-arrow-right {
|
||||
top: calc(50% - 4px);
|
||||
left: calc(100% - 4px);
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar,
|
||||
.tchmi-line-chart-template-menu-bar {
|
||||
position: absolute;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
width: calc(100% - 15px);
|
||||
/* Same as chart margin! margin px is used in js code, too */
|
||||
margin: 5px;
|
||||
margin-top: 0px;
|
||||
height: 50px;
|
||||
padding-left: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar-top,
|
||||
.tchmi-line-chart-template-menu-bar-top {
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
/* Same as chart margin! margin px is used in js code, too */
|
||||
margin: 5px;
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar-bottom,
|
||||
.tchmi-line-chart-template-menu-bar-bottom {
|
||||
bottom: 0px;
|
||||
left: 0px;
|
||||
/* Same as chart margin! margin px is used in js code, too */
|
||||
margin: 5px;
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar-dropdown,
|
||||
.tchmi-line-chart-template-menu-bar-dropdown {
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar-dropdown div:last-child,
|
||||
.tchmi-line-chart-template-menu-bar-dropdown div:last-child {
|
||||
margin-right: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar > div .TcHmi_Controls_Beckhoff_TcHmiToggleButton,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar-dropdown > .TcHmi_Controls_Beckhoff_TcHmiToggleButton,
|
||||
.tchmi-line-chart-template-menu-bar > div .tchmi-toggle-button,
|
||||
.tchmi-line-chart-template-menu-bar-dropdown > .tchmi-toggle-button {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
position: relative;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar > div .TcHmi_Controls_Beckhoff_TcHmiButton,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar-dropdown > .TcHmi_Controls_Beckhoff_TcHmiButton,
|
||||
.tchmi-line-chart-template-menu-bar > div .tchmi-toggle-button,
|
||||
.tchmi-line-chart-template-menu-bar-dropdown > .tchmi-toggle-button {
|
||||
height: 30px;
|
||||
width: 30px;
|
||||
min-width: 30px;
|
||||
min-height: 30px;
|
||||
position: relative;
|
||||
float: left;
|
||||
box-sizing: border-box;
|
||||
margin-right: 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar
|
||||
> div
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-options,
|
||||
.tchmi-line-chart-template-menu-bar > div .tchmi-line-chart-template-options {
|
||||
top: 0px;
|
||||
height: 50px;
|
||||
width: 15px;
|
||||
min-width: 15px;
|
||||
min-height: 50px;
|
||||
position: absolute;
|
||||
float: right;
|
||||
box-sizing: border-box;
|
||||
margin: 0px;
|
||||
right: 0px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiButton.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-options:before,
|
||||
.tchmi-button.tchmi-line-chart-template-options:before {
|
||||
content: '\25bc';
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
bottom: 0;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: sans-serif;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-text
|
||||
table,
|
||||
.tchmi-line-chart-template-tooltip .tchmi-line-chart-template-tooltip-text table {
|
||||
text-align: left;
|
||||
border-collapse: collapse;
|
||||
border: none; /** No border defined */
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-table,
|
||||
.tchmi-line-chart-template-tooltip-table {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-table tr td:first-child,
|
||||
.tchmi-line-chart-template-tooltip-table tr td:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-text
|
||||
table
|
||||
td,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-text
|
||||
table
|
||||
th,
|
||||
.tchmi-line-chart-template-tooltip .tchmi-line-chart-template-tooltip-text table td,
|
||||
.tchmi-line-chart-template-tooltip .tchmi-line-chart-template-tooltip-text table th {
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-tooltip-text
|
||||
table
|
||||
td,
|
||||
.tchmi-line-chart-template-tooltip .tchmi-line-chart-template-tooltip-text table td {
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar > .TcHmi_Controls_Beckhoff_TcHmiButton,
|
||||
.TcHmi_Controls_Beckhoff_TcHmiLineChart-template-menu-bar-dropdown > .TcHmi_Controls_Beckhoff_TcHmiButton,
|
||||
.tchmi-line-chart-template-menu-bar > .tchmi-button,
|
||||
.tchmi-line-chart-template-menu-bar-dropdown > .tchmi-button {
|
||||
box-shadow: none;
|
||||
}
|
||||
Reference in New Issue
Block a user