/* Tile view of BlobItem */ .cam-blobitem { display: inline-block; } .cam-blobitem>a { text-decoration: none; } .cam-blobitem-thumbclip { position: relative; overflow: hidden; } .cam-blobitem-loading { background-color: rgb(240, 240, 240); } .cam-blobitem-progress { position: relative; } .cam-blobitem-progress .lefttop { position: absolute; width: 0; height: 0; border-bottom: 50px solid rgb(220,220,220); border-left: 35px solid transparent; -webkit-animation: leftcolors 1.0s infinite ease-in-out; animation: leftcolors 1.0s infinite ease-in-out; } .cam-blobitem-progress .leftbottom { position: absolute; top: 50px; width: 0; height: 0; border-top: 15px solid rgb(220,220,220); border-left: 35px solid transparent; -webkit-animation: leftcolors 1.0s infinite ease-in-out; animation: leftcolors 1.0s infinite ease-in-out; } .cam-blobitem-progress .righttop { position: absolute; left: 35px; width: 0; height: 0; border-bottom: 50px solid rgb(180,180,180); border-right: 35px solid transparent; -webkit-animation: rightcolors 1.0s infinite ease-in-out; animation: rightcolors 1.0s infinite ease-in-out; } .cam-blobitem-progress .rightbottom { position: absolute; left: 35px; top: 50px; width: 0; height: 0; border-top: 15px solid rgb(180,180,180); border-right: 35px solid transparent; -webkit-animation: rightcolors 1.0s infinite ease-in-out; animation: rightcolors 1.0s infinite ease-in-out; } .cam-blobitem-thumb { display: block; position: relative; } .cam-blobitemcontainer-50 .cam-blobitem-thumbtitle { font-size: 10px; } .cam-blobitemcontainer-75 .cam-blobitem-thumbtitle { font-size: 12px; } .cam-blobitemcontainer-100 .cam-blobitem-thumbtitle { font-size: 12px; } .cam-blobitemcontainer-150 .cam-blobitem-thumbtitle { font-size: 13px; } .cam-blobitemcontainer-200 .cam-blobitem-thumbtitle { font-size: 14px; } .cam-blobitemcontainer-250 .cam-blobitem-thumbtitle { font-size: 14px; } .cam-blobitem-thumbtitle { color: #222; font-size: 0.8em; overflow: hidden; padding: 0 1ex; text-align: center; text-overflow: ellipsis; display: block; } .cam-blobitem.cam-blobitem-image .cam-blobitem-thumbtitle { display: none; } .cam-blobitem.cam-dropactive { border: 1px solid #acf!important; outline: 1px solid #acf!important; background: #e5efff; } .cam-blobitem .checkmark { background-image: url('checkmark2.svg'); background-repeat: no-repeat; background-size: 100% 100%; cursor: pointer; height: 25px; left: 5px; opacity: 0; position: absolute; top: 5px; transition: opacity 0.2s ease; width: 25px; } .cam-blobitem.goog-control-disabled .checkmark { display: none; } .cam-blobitem.goog-control-hover .checkmark { opacity: 0.6; } .cam-blobitem.goog-control-hover .checkmark:hover { opacity: 1!important; } .cam-blobitem.goog-control-checked .checkmark { opacity: 1!important; } .cam-blobitem.goog-control-checked .checkmark { background-image: url('checkmark2_blue.svg'); } /* keyframes for the loading animation, interpolates between a light and dark grey */ /* see .cam-blobitem-progress above */ @-webkit-keyframes leftcolors { 0% { border-bottom-color: rgb(220,220,220); border-top-color: rgb(220,220,220) } 50% { border-bottom-color: rgb(180,180,180); border-top-color: rgb(180,180,180) } 100% { border-bottom-color: rgb(220,220,220); border-top-color: rgb(220,220,220) } } @-webkit-keyframes rightcolors { 0% { border-bottom-color: rgb(180,180,180); border-top-color: rgb(180,180,180) } 50% { border-bottom-color: rgb(220,220,220); border-top-color: rgb(220,220,220) } 100% { border-bottom-color: rgb(180,180,180); border-top-color: rgb(180,180,180) } } @keyframes leftcolors { 0% { border-bottom-color: rgb(220,220,220); border-top-color: rgb(220,220,220) } 50% { border-bottom-color: rgb(180,180,180); border-top-color: rgb(180,180,180) } 100% { border-bottom-color: rgb(220,220,220); border-top-color: rgb(220,220,220) } } @keyframes rightcolors { 0% { border-bottom-color: rgb(180,180,180); border-top-color: rgb(180,180,180) } 50% { border-bottom-color: rgb(220,220,220); border-top-color: rgb(220,220,220) } 100% { border-bottom-color: rgb(180,180,180); border-top-color: rgb(180,180,180) } }