| ul.devices-icon-view { |
| margin: 0; |
| display: inline-block; |
| list-style-type: none; |
| font-family: 'HelveticaNeue-UltraLight', Helvetica, Arial, sans-serif; |
| } |
| |
| ul.devices-icon-view li { |
| width: 126px; |
| height: 170px; |
| background: white; |
| -webkit-border-radius: 8px; |
| -moz-border-radius: 8px; |
| border-radius: 8px; |
| border: 1px solid #e9e9e9; |
| float: left; |
| clear: none; |
| margin: 6px; |
| text-align: center; |
| } |
| |
| ul.devices-icon-view li:active { |
| -webkit-filter: brightness(95%); |
| filter: brightness(95%); |
| } |
| |
| |
| ul.devices-icon-view li:hover { |
| background-color: #fcfcfc; |
| } |
| |
| ul.devices-icon-view li:hover .device-photo-small img { |
| -webkit-filter: brightness(120%); |
| filter: brightness(120%); |
| } |
| |
| ul.devices-icon-view .device-photo-small { |
| margin-top: 8px; |
| margin-bottom: 10px; |
| } |
| |
| ul.devices-icon-view .device-photo-small img { |
| width: auto; |
| height: 90px; |
| max-width: 95%; /* TODO: Fix this with a new container */ |
| } |
| |
| ul.devices-icon-view .device-name-bigtext { |
| display: inline-block; |
| width: 80%; |
| } |
| |
| ul.devices-icon-view .device-name { |
| color: #3FA9F5; |
| font-size: 16px; |
| text-overflow: ellipsis; |
| overflow: hidden; |
| white-space: nowrap; |
| } |
| |
| ul.devices-icon-view .device-product { |
| font-size: 16px; |
| color: #555; |
| } |
| |
| ul.devices-icon-view .device-is-busy { |
| opacity: 0.6; |
| cursor: not-allowed; |
| /*-webkit-filter: grayscale(100%);*/ |
| /*filter: grayscale(100%);*/ |
| } |
| |
| ul.devices-icon-view .device-is-busy .btn { |
| cursor: not-allowed; |
| } |
| |
| ul.devices-icon-view .device-is-busy .device-photo-small img { |
| opacity: 0.5; |
| } |
| |
| ul.devices-icon-view .device-status.state-available { |
| display: none; |
| } |
| |
| ul.devices-icon-view .device-name.state-available { |
| white-space: normal; |
| max-height: 45px; |
| } |