/* Edit icon on tiled grids -----------------------------*/ .polaroid { position: relative; } .polaroid a.edit { background: #fff; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.3); display: none !important; left: 20px; line-height: 1.5; padding: 5px 10px; position: absolute; top: 20px; } .polaroid:hover > a.edit { display: block !important; } /* Crop editor ----------------*/ #crop_editor { display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0, 0, 0, 0.8); z-index: 100; color: #fff; } #crop_editor input[type=number] { width: 75px; background: #555; color: #fff; } #crop_editor input[type=checkbox] { vertical-align: middle; } .crop_position { background: rgba(0, 0, 0, 1.0); border: none; padding: 5px; text-align: center; } .crop_position input, .crop_position .btn { margin: 0 5px; } .crop_image_container { position: relative; flex-grow: 1; max-height: calc(100% - 34px); } .crop_image_container img { border: 1px solid #000; max-height: 100%; max-width: 100%; } #crop_boundary { border: 1px dashed rgb(255, 255, 255); background: rgba(255, 255, 255, 0.4); cursor: move; position: absolute; z-index: 200; width: 500px; height: 300px; top: 400px; left: 300px; }