| .pe-image-documentation { |
| box-shadow: 0 0 3px #555; |
| padding: 5px; |
| } |
| |
| .pe-grid-container { |
| display: grid; |
| /*grid-template-rows:200px 1fr 100px;*/ |
| grid-template-columns: 50% 50%; |
| } |
| |
| .pe-container-item { |
| height: 180px; |
| border-radius: 4px; |
| background-color: #ffffff; |
| box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1); |
| border: solid 1px #dedede; |
| padding: 8px 0px 2px; |
| color: #262626; |
| display: inline-block; |
| margin: 15px 7px 0 7px; |
| vertical-align: top; |
| text-align: left; |
| position: relative; |
| } |
| |
| .pe-container-item-sink { |
| border-top: 4px solid #3F51B5; |
| } |
| |
| .pe-container-item-processor { |
| border-top: 4px solid #009688; |
| } |
| |
| .pe-container-item-adapter { |
| border-top: 4px solid #FFEB3B; |
| } |
| |
| .pe-container-item-header { |
| display: flex; |
| flex-direction: row; |
| margin-bottom: 5px; |
| padding-top: 5px; |
| padding-left: 16px; |
| padding-right: 16px; |
| } |
| |
| .pe-container-item-icon { |
| box-shadow: 0 0 2px #555; |
| display: inline; |
| float: left; |
| padding: 10px; |
| margin-right: 20px; |
| margin-top: 10px; |
| } |
| |
| .pe-container-item-icon-processor { |
| width: 75px; |
| height: 75px; |
| } |
| |
| .pe-container-item-icon-sink { |
| width: 75px; |
| height: 75px; |
| } |
| |
| .pe-container-item-icon-adapter { |
| width: 75px; |
| height: 75px; |
| display: flex; |
| align-items: center; |
| } |
| |
| .pe-container-item-header-pe { |
| display: flex; |
| flex-direction: column; |
| flex: 1; |
| } |
| |
| .pe-container-item-label { |
| color: white; |
| float: right; |
| padding: 2px 4px; |
| font-size: 9pt; |
| align-self: flex-end; |
| } |
| |
| .pe-container-item-label-name { |
| float: left; |
| margin-top: auto; |
| font-weight: bold; |
| font-size: 14pt; |
| } |
| |
| .pe-container-item-label-processor { |
| background: #009688; |
| } |
| |
| .pe-container-item-label-sink { |
| background: #3F51B5; |
| } |
| |
| .pe-container-item-label-adapter { |
| background: #FFEB3B; |
| color:black; |
| } |
| |
| .pe-container-item-body { |
| padding-left: 16px; |
| padding-right: 16px; |
| margin-top: 10px; |
| font-size: 11pt; |
| } |
| |
| .pe-icon { |
| display: inline-block; |
| margin-left: auto; |
| margin-right: auto; |
| max-height: 100%; |
| width: 100%; |
| } |
| |
| .pe-icon-sink { |
| border: 2px solid #3F51B5; |
| } |
| |
| .pe-icon-processor { |
| border: 2px solid #009688; |
| } |
| |
| .pe-icon-adapter { |
| border: 2px solid #FFEB3B; |
| } |
| |
| .pe-container-item-footer { |
| display: grid; |
| grid-template-columns: 33% 33% 33%; |
| position: absolute; |
| bottom: 2px; |
| font-size: 9pt; |
| color: gray; |
| width: 100%; |
| align-items: center; |
| justify-items: center; |
| } |