diff --git a/style.css b/style.css index 864889d..be726d6 100644 --- a/style.css +++ b/style.css @@ -1536,135 +1536,51 @@ textarea { image-rendering: pixelated; } -.overlay { +body > div.overlay { position: fixed; top: 0px; bottom: 0px; left: 0px; right: 0px; z-index: 20; - background-color: #000a; + background-color: #0006; width: 100%; height: 100%; - display: flex; - align-items: center; } -.overlay .box, -.overlay .attachment { - background: var(--main-background); - border: 2px inset gray; - padding: 8px; - - margin-left: auto; margin-right: auto; -} -.overlay .box { - position: fixed; - left: 0; right: 0; +body > div.overlay .dialog { + background: linear-gradient(180deg, #ffffff 0%, #f3dca9 8px); + border: 1px outset #a48e65; + max-height: 80%; + max-width: 400px; + margin: auto; } -.overlay .popup { - min-width: 128px; - /*height: 80px;*/ +body > div.overlay .dialog table { + width: 100%; + max-width: unset; + margin: 0px; +} + +body > div.overlay .dialog table th, body > div.overlay .dialog table td { padding: 4px; } + +body > div.overlay .dialog table.titlebox { font-family: var(--primary-font); } + +body > div.overlay .dialog table.titlebox img.close-button { + cursor: pointer; + user-select: none; +} + +body > div.overlay .dialog table tr th:nth-of-type(1) { + text-align: left; +} + +body > div.overlay .dialog table:not(.titlebox) { + background: #b3b3b3; + border: 1px outset #636363; + display: block; + height: 400px; overflow: auto; } -.overlay .popup.box .embedder .embed-item { - display: inline-block; - padding: 4px; - cursor: pointer; - border: 1px solid transparent; - height: 30px; - font-family: var(--primary-font); -} - -.overlay .popup.box .embedder .embed-item img { - padding: 2px; - margin: 2px; - vertical-align: middle; -} - -.overlay .popup.box .embedder .embed-item:hover { - border: var(--primary-container-border); - background: var(--primary-container-background); -} - -.overlay .popup.box .embedder .embed-item.selected { - border: 1px outset #65aad2; - background: #b6dfe6; -} - -.dragbox { - position: absolute; - z-index: 10; - background: var(--main-background); - border: var(--primary-container-border); - padding: 8px; - box-shadow: #0005 5px 5px 4px; - max-width: 100%; -} - -.dragbox textarea { - resize: both; -} - -.overlay .popup .titlebar, -.overlay .attachment .titlebar, -.dragbox .titlebar { - display: flex; - position: sticky; - top: -8px; - margin: -8px; - margin-bottom: 8px; - padding: 4px; - background: var(--popup-title-bg); - border-bottom: var(--popup-title-border); - font-family: var(--primary-font); -} - -.overlay .popup .titlebar .title, -.overlay .attachment .titlebar .title, -.dragbox .titlebar .title { - flex-grow: 1; -} - -.overlay .popup .titlebar .closebtn, -.overlay .attachment .titlebar .closebtn, -.dragbox .titlebar .closebtn { - cursor: pointer; -} - -.dragbox .button-row { - display: flex; - border-top: var(--primary-container-border); - margin: -8px; margin-top: 0px; - padding: 4px; -} - -.dragbox .content {display: flex;} -.dragbox#rename .content, -.dragbox#new-folder .content { - flex-direction: column; -} - -@media only screen and (orientation: portrait) { - .overlay .box { - left: 4px; - right: 4px; - } - - .overlay .box, .overlay .attachment { - max-width: 100%; - } - - .overlay .popup, .overlay .attachment { - max-height: 90%; - } -} - @media only screen and (orientation: landscape) { - .overlay .popup { - max-width: 512px; - max-height:90%; - } - .tabbed-container.vertical { flex-direction: row; }