.total { position: relative; margin: 0 auto; display: block; background-color: #ddd; width: 100%; min-width: 800px; height: 100%; min-height: 600px; -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; overflow: hidden; } .total-menu { position: absolute; width: 200px; font-size: 12px; background-color: rgba(255, 255, 255, 0.75); padding: 4px 0; z-index: 100; border-radius: 4px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 0 10px rgba(0,0,0, 0.5); text-align: left; } .total-menu:hover { cursor: default; } .total-menu .total-menu-item { width: calc(100%-4px); line-height: 1.5em; padding: 0 1.5em; } .total-menu .total-menu-item.inactive { color: rgba(0,0,0, 0.4); } .total-menu .total-menu-item:not(.inactive):hover { background-color: rgba(100, 100, 100, 0.5); cursor: pointer; } .total-menu .total-menu-item .total-arrow { float: right; font-size: 1.4em; line-height: 0.9em; } .total-menu hr { margin: 5px !important; width: calc(100% - 10px) !important; max-width: calc(100% - 10px) !important; } .total-overlay { display: flex; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70%; height: 50%; font-size: 12px; background-color: rgba(255, 255, 255, 0.75); padding: 20px; z-index: 100; border-radius: 4px; -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); box-shadow: 0 0 10px rgba(0,0,0, 0.5); text-align: left; } #total-overlay-image-picker { display: flex; flex-wrap: wrap; justify-content: center; } #total-overlay-add-new-image { width: 64px; height: 64px; margin: 5px; color: grey; background: lightgrey; text-align: center; font-size: 50px; line-height: 63px; } #total-overlay-image-picker img.node-image-thumb { width: 64px; height: 64px; margin: 5px; } #total-overlay-image-picker img.node-image-view { width: 100%; object-fit: scale-down; } .total-spinner { display: none; position: absolute; left: calc(50% - 32px); top: calc(50% - 32px); width: 64px; height: 64px; z-index: 200; } .total-spinner:after { content: " "; display: block; width: 46px; height: 46px; margin: 1px; border-radius: 50%; border: 5px solid #fff; border-color: #fff transparent #fff transparent; animation: spin-baby-spin 1.2s linear infinite; } @keyframes spin-baby-spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } .CodeMirror { line-height: 18px; font-size: 14px; }