.prompt { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: #fff; border: 1px solid rgba(0, 0, 0, 0.075); box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); padding: 2em; max-width: 25em; width: 90%; max-height: 95%; z-index: 99999; } .overlay { background-color: rgba(0, 0, 0, 0.5); position: fixed; top: 0; left: 0; height: 100%; width: 100%; z-index: 9999; } .overlay.active, .prompt.active, .help.active { animation: .1s show forwards; } .prompt h3 { margin: 0; font-weight: 500; font-size: 1.5em; } .prompt p { font-size: .9em; color: rgba(0, 0, 0, 0.8); margin: .5em 0 1em; } .prompt input { width: 100%; border: 1px solid #dadada; line-height: 1; padding: .3em; } .prompt code { word-wrap: break-word; } .prompt div { margin-top: 1em; display: flex; justify-content: flex-start; flex-direction: row-reverse; } .prompt .cancel { background-color: #ECEFF1; color: #37474F; } .prompt .cancel:hover { background-color: #e9eaeb; } /* * * * * * * * * * * * * * * * * PROMPT - MOVE * * * * * * * * * * * * * * * * */ .file-list { max-height: 50vh; overflow: auto; list-style: none; margin: 0; padding: 0; width: 100%; } .file-list li { width: 100%; user-select: none; border-radius: .2em; padding: .3em; } .file-list li[aria-selected=true] { background: #2196f3 !important; color: #fff !important; transition: .1s ease all; } .file-list li:hover { background-color: #e9eaeb; cursor: pointer; } .file-list li:before { content: "folder"; color: #6f6f6f; vertical-align: middle; line-height: 1.4; font-family: 'Material Icons'; font-size: 1.75em; margin-right: .25em; } .file-list li[aria-selected=true]:before { color: white; } .help { max-width: 24em; } .help ul { padding: 0; margin: 1em 0; list-style: none; } @keyframes show { 0% { display: none; opacity: 0; } 1% { display: block; opacity: 0; } 100% { display: block; opacity: 1; } }