.admin_box { margin: 0; padding: 20px; background: #fff; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); overflow: auto; } .admin_box h2 { font: 700 24px "Open Sans", sans-serif; margin: 0 0 0.2em; } /* Admin bar styles ---------------------*/ body { padding-top: 30px; } #admin_bar { background: #333; color: #ccc; left: 0; position: fixed; top: 0; width: 100%; z-index: 100; } #admin_bar ul { list-style: none; margin: 0 auto; max-width: 1280px; min-width: 900px; padding: 2px; width: 95%; } #admin_bar ul > li { display: inline; border-right: 1px solid #aaa; } #admin_bar ul > li:last-child { border-right: none; } #admin_bar li > a { color: inherit; display: inline-block; padding: 4px 6px; } #admin_bar li a:hover { text-decoration: underline; } /* (Tag) autosuggest ----------------------*/ #new_tag_container { display: block; position: relative; } .autosuggest { background: #fff; border: 1px solid #ccc; position: absolute; top: 29px; margin: 0; padding: 0; } .autosuggest li { display: block !important; padding: 3px; } .autosuggest li:hover, .autosuggest li.selected { background: #CFECF7; cursor: pointer; } /* Admin widgets ------------------*/ .widget { background: #fff; padding: 25px; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3); } .widget h3 { margin: 0 0 1em; font: 400 18px "Raleway", sans-serif; } .widget p, .errormsg p { margin: 0; } .widget ul { margin: 0; list-style: none; padding: 0; } .widget li { line-height: 1.7em; } /* Edit icon on tiled grids -----------------------------*/ .tiled_grid div.landscape, .tiled_grid div.portrait, .tiled_grid div.panorama { position: relative; } .tiled_grid div > a.edit { background: #fff; border-radius: 3px; box-shadow: 1px 1px 2px rgba(0,0,0,0.3); display: none; left: 20px; line-height: 1.5; padding: 5px 10px; position: absolute; top: 20px; } .tiled_grid div:hover > a.edit { display: block; } /* 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: 50px; 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; }