body { margin: 0; font-family: Arial,sans-serif; font-size:16px; cursor:default; background-color: #EEEEEE; overflow: hidden; display: flex; height: 100vh; flex-direction: column; } a { text-decoration:none; } .header { min-height: 30px; background-color: white; padding:10px; box-shadow: 0 4px 5px 0 rgba(0,0,0,0.14), 0 1px 10px 0 rgba(0,0,0,0.12), 0 2px 4px -1px rgba(0,0,0,0.2); } .header .left { float:left; padding: 10px; } .header .right { float:right; margin: 5px 0; } .header .filename { color: #555; font-size: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .header .filename img { margin-right: 2px; } .header .details { color: #777; display: inline-block; font-size: 14px; padding: 0 20px; } .main { flex: 1; display: flex; align-items: center; justify-content: center; } .icon { max-width: 256px; max-height: 256px; box-shadow: 0 2px 8px 0 rgba(0,0,0,.5); } .image { background-size: contain; background-repeat:no-repeat; background-position: center; width: 90%; height: 90%; } iframe { width:100%; height:100%; } .actionBtn { padding:10px 15px; display: inline-block; cursor: hand; border-radius: 2px; color: #4285f4; text-transform: uppercase; transition: color 200ms cubic-bezier(0.4,0.0,0.2,1),background 200ms cubic-bezier(0.4,0.0,0.2,1),box-shadow 400ms cubic-bezier(0.4,0.0,0.2,1); } .actionBtn:hover { background: rgba(0,0,0,.12); text-decoration: none; color: #4285f4; } .actionBtn:active { background-color: rgba(0, 0, 0, 0.26); } .commentsBtn { margin-left:10px; text-transform: none; } .overlay { position: fixed; display: none; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0,0,0,0.6); z-index: 2; cursor: default; } .panel { position: absolute; background-color:white; width: 400px; font-size:14px; border-radius: 2px; box-shadow: 0 4px 8px rgba(0,0,0,.32),0 8px 40px rgba(0,0,0,.4); top: 50%; left: 50%; transform: translate(-50%, -50%); padding:20px; } .panel-contents { margin-bottom:20px; border:1px solid #ebebeb; height:200px; overflow-y:auto; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); } .panel-contents div {margin:10px;} .acceptBtn {margin-right:10px;} .cancelBtn, .cancelBtn:hover { color: black; } .comment .author { color:silver; text-align:right; }