12 lines
8.4 KiB
CSS
12 lines
8.4 KiB
CSS
:root{color-scheme:light dark;--font-color:black;--font-color-disabled:#888;--bg-color:white;--border-color:#ccc;--border-color-2:#aaa;--footer-font-color:#666;--footer-bg-color:#eee;--modal-bg-color:#fefefe;--file-drop-color:#eee}[data-theme="dark"]{--font-color:#ccc;--font-color-disabled:#777;--bg-color:#212121;--border-color:#848484;--border-color-2:#aaa;--footer-font-color:#ccc;--footer-bg-color:black;--modal-bg-color:#424242;--file-drop-color:#212121}html,body{margin:0;padding:0}
|
|
html{font-family:arial,helvetica,sans-serif}body{background-color:var(--bg-color);color:var(--font-color);overflow:auto}@media screen and (min-width:900px){body{height:100vh;overflow:hidden}.app{height:100%}}input:not([type="image"]){background-color:var(--bg-color);color:var(--font-color)}input[type="file"]::file-selector-button{background-color:var(--bg-color);color:var(--font-color)}select{background-color:var(--bg-color);color:var(--font-color)}
|
|
.hr{padding:1rem 0;width:100%}.flex-columns>.hr{padding:0 1rem;width:initial;height:100%}.hr:after{content:"";display:block;background-color:var(--border-color);height:100%;width:100%;min-height:3px;min-width:3px}.wait{cursor:wait}.wait>*{pointer-events:none}.flex-columns{display:flex;flex-direction:row;flex-wrap:wrap}.flex-rows{display:flex;flex-direction:column}.flex-main{flex:1 1 1px;overflow:auto}.flex-columns>*,.flex-rows>*{flex-shrink:0}.header{margin-left:auto;margin-right:auto;text-align:center}
|
|
.main{margin:1% 5%;z-index:1}.main>div{margin:0 1.75%}.main>div:first-child{margin-left:0}.main>div:last-child{margin-right:0}@media screen and (max-width:900px){.main{display:block;overflow:inherit}.main>div{margin:1.75% 0}.main>div:first-child{margin-top:0}.main>div:last-child{margin-bottom:0}}.footer p{background-color:var(--footer-bg-color);color:var(--footer-font-color);font-size:.7em;margin:0;padding:.5em;text-align:center}[data-theme="dark"] img:not(#diagram-png):not(.no-filter){filter:invert() contrast(30%)}
|
|
[data-theme="dark"] input[type="image"]{filter:invert() contrast(30%)}[data-theme="dark"] a{color:white}.editor{border:3px solid var(--border-color);box-sizing:border-box;overflow:hidden}@media screen and (max-width:900px){.editor{height:20em}}.editor .monaco-editor-container{overflow:hidden;position:relative}#monaco-editor{height:100%}#monaco-editor .overlayWidgets .suggest-details p img[alt="icon"],#monaco-editor .overlayWidgets .suggest-details p img[alt="emoji"]{height:1.2rem}.monaco-editor-container .editor-menu{position:absolute;right:0;top:0;display:flex;flex-direction:column;justify-content:center;align-items:center;flex:1}.monaco-editor-container .editor-menu>div.menu-kebab{width:60px;height:60px;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;cursor:pointer;scale:.5}.monaco-editor-container .editor-menu:hover>div.menu-kebab,.monaco-editor-container .editor-menu:focus>div.menu-kebab{outline:0;scale:.65}.monaco-editor-container .menu-kebab .kebab-circle{width:12px;height:12px;margin:3px;background:var(--font-color);border-radius:50%;display:block;opacity:.8}
|
|
.monaco-editor-container .menu-kebab{flex-direction:column;position:relative;transition:all 300ms cubic-bezier(0.175,0.885,0.32,1.275)}.monaco-editor-container .menu-kebab .kebab-circle:nth-child(4),.monaco-editor-container .menu-kebab .kebab-circle:nth-child(5){position:absolute;opacity:0;top:50%;margin-top:-6px;left:50%}.monaco-editor-container .menu-kebab .kebab-circle:nth-child(4){margin-left:-25px}.monaco-editor-container .menu-kebab .kebab-circle:nth-child(5){margin-left:13px}.monaco-editor-container .editor-menu:hover .menu-kebab,.monaco-editor-container .editor-menu:focus .menu-kebab{transform:rotate(45deg)}
|
|
.monaco-editor-container .editor-menu:hover .menu-kebab .kebab-circle,.monaco-editor-container .editor-menu:focus .menu-kebab .kebab-circle{opacity:1}.monaco-editor-container .editor-menu .menu-item{display:none;margin:1rem 0;height:1.75rem;opacity:.5;position:relative;-webkit-animation-name:editor-menu-animateitem;-webkit-animation-duration:.4s;animation-name:editor-menu-animateitem;animation-duration:.4s}@-webkit-keyframes editor-menu-animateitem{from{top:-50%;opacity:0}to{top:0;opacity:.5}}@keyframes editor-menu-animateitem{from{top:-50%;opacity:0}
|
|
to{top:0;opacity:.5}}.monaco-editor-container .editor-menu .menu-item:hover{opacity:1}.monaco-editor-container .editor-menu:hover .menu-item,.monaco-editor-container .editor-menu:focus .menu-item{display:block}.editor .btn-input{align-items:center;border-bottom:3px solid var(--border-color);box-sizing:border-box;display:flex;justify-content:center}.editor .btn-input input[type=text]{border:0;flex:1 1 1px;font-family:monospace;font-size:medium;padding:.2em;text-overflow:ellipsis}.editor .btn-input input[type=text]:focus{border:0;box-shadow:none;outline:0}.editor .btn-input input[type="image"]{height:1rem;margin-left:.7em;padding:0 .3em}#diagram-export.modal .label-input-pair label{min-width:8rem}#diagram-import p.error-message{color:darkred;padding-left:1rem;padding-right:1rem}#diagram-import input[type="file"]{display:block;width:100%;border:.2rem dashed var(--border-color);border-radius:.4rem;box-sizing:border-box;padding:5rem 2rem}#diagram-import input[type="file"],#diagram-import input[type="file"]::file-selector-button{background-color:var(--modal-bg-color)}#diagram-import input[type="file"]:hover,#diagram-import input[type="file"].drop-able{border-color:var(--border-color-2);background-color:var(--file-drop-color)}
|
|
#diagram-import input[type="file"]:hover::file-selector-button,#diagram-import input[type="file"].drop-able::file-selector-button{background-color:var(--file-drop-color)}.modal{display:block;position:fixed;z-index:1;padding:5%;left:0;top:0;bottom:0;right:0;overflow:auto;background-color:#000;background-color:rgba(0,0,0,0.4)}.modal .modal-content{background-color:var(--modal-bg-color);margin:auto;padding:2rem;border:3px solid var(--border-color);max-width:30rem;box-shadow:0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);-webkit-animation-name:modal-animatetop;-webkit-animation-duration:.4s;animation-name:modal-animatetop;animation-duration:.4s;position:relative;top:50%;transform:translateY(-50%)}
|
|
@-webkit-keyframes modal-animatetop{from{top:-50%;opacity:0}to{top:50%;opacity:1}}@keyframes modal-animatetop{from{top:-50%;opacity:0}to{top:50%;opacity:1}}.modal .modal-header h2{margin:0}.modal .modal-main{flex:1}.modal .modal-footer{margin-top:1rem;text-align:right}.modal input,.modal select{border:1px solid var(--border-color)}.modal input:not(:focus):invalid{border-bottom-color:red}.modal input[type="file"]::file-selector-button{border:1px solid var(--border-color)}
|
|
.modal input.ok,.modal input.cancel{min-width:5rem}.modal input.ok[disabled],.modal input.cancel[disabled]{color:var(--font-color-disabled)}.modal input.ok:not([disabled]):hover{border-bottom-color:green}.modal input.cancel:not([disabled]):hover{border-bottom-color:darkred}.modal .label-input-pair{margin:1rem 0;overflow:hidden}.modal .label-input-pair:first-child{margin-top:0}.modal .label-input-pair:last-child{margin-bottom:0}.modal .label-input-pair label{display:inline-block;min-width:15rem}.modal .label-input-pair label+input,.modal .label-input-pair label+select{box-sizing:border-box;display:inline-block;min-width:10rem}#settings #settings-monaco-editor{height:17rem;border:1px solid var(--border-color)}.diagram{height:100%;overflow:auto}.diagram[data-diagram-type="pdf"]{overflow:hidden}.diagram>div{margin:1rem 0;text-align:center}.diagram[data-diagram-type="pdf"]>div{height:20em;width:100%}.diagram img,.diagram svg,.diagram pre{border:3px solid var(--border-color);box-sizing:border-box;padding:10px}@media screen and (min-width:900px){.diagram{position:relative}.diagram>div{margin:0}.diagram:not([data-diagram-type="pdf"])>div{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);max-height:100%;max-width:100%}
|
|
.diagram[data-diagram-type="pdf"]>div{height:100%}}.preview-menu{margin-left:5%;margin-right:5%}.diagram-link img,.btn-dock{width:2.5rem}.btn-settings{width:2.2rem;margin-left:auto;margin-right:.25rem}.menu-r{min-width:3rem}.menu-r .btn-float-r{float:right;margin-left:.25rem;text-align:right}.diagram-links{align-items:center;display:flex}.diagram-link{margin-left:.25rem;margin-right:.25rem}.diagram-links .diagram-link:first-of-type{margin-left:.5rem}.diagram-links .diagram-link:last-of-type{margin-right:0}#paginator{text-align:center;margin-bottom:1rem}.previewer-container{height:100%}@media screen and (max-width:900px){.previewer-container{height:initial}.previewer-main{flex:none}} |