41 lines
2.4 KiB
CSS
41 lines
2.4 KiB
CSS
|
/* ========
|
||
|
|
| Reference overlay
|
||
|
|
|= ======== */
|
||
|
|
|
||
|
|
#dialogueArea { display: block; position: fixed; left: 0; top: 0;
|
||
|
|
width: 100%; height: 100%;
|
||
|
|
max-width: initial; max-height: initial;
|
||
|
|
background: rgba(0,0,0,.7); backdrop-filter: blur(3px);
|
||
|
|
z-index: 10000; }
|
||
|
|
#dialogue { display: block; position: absolute; left: 50%; top: 50%;
|
||
|
|
transform: translate(-50%, -50%); min-width: 60vw; min-height: 2em;
|
||
|
|
max-width: 90vw; max-height: 90vh; overflow-y: auto;
|
||
|
|
padding: 1.5em 1em;
|
||
|
|
background: var(--color-bg-normal); border-radius: .3em;
|
||
|
|
box-shadow: 2px 2px 4px var(--color-fg-less), -2px -2px 4px var(--color-fg-less); }
|
||
|
|
#dialogue h3 { margin-top: 0; padding-top: 0; text-transform: initial; color: var(--color-fg-less); }
|
||
|
|
|
||
|
|
#confirmButtons { text-align: right; }
|
||
|
|
#dialogue .buttonLike { margin: .5em 0 .2em .5em; background: transparent; transition: background .4s, color .4s; }
|
||
|
|
#dialogue .buttonLike:hover { background: var(--color-borders-dark); color: var(--color-bg-normal); }
|
||
|
|
|
||
|
|
#dialogue input[type="text"],
|
||
|
|
#dialogue textarea { padding: .5em; border-radius: .1em; border: 2px solid var(--color-borders); transition: border .4s; }
|
||
|
|
#dialogue input[type="text"]:hover,
|
||
|
|
#dialogue textarea:hover { border-color: var(--color-fg-normal); }
|
||
|
|
#dialogue button { padding: .6em .8em; font-size: .8em; background: var(--color-bg-normal); border: 1px solid var(--color-borders);
|
||
|
|
transition: .4s; }
|
||
|
|
#dialogue button:focus,
|
||
|
|
#dialogue button:hover { background: var(--color-fg-less); color: var(--color-bg-normal); border-color: var(--color-fg-less); }
|
||
|
|
#dialogue form > * { display: block; width: 100%; }
|
||
|
|
#dialogue form label { font-weight: bold; color: var(--color-fg-less); }
|
||
|
|
#dialogueClose { float: right; display: inline-block; padding: 0 .6em .2em .6em; background: var(--color-bg-raised);
|
||
|
|
border-radius: 100%; cursor: pointer; transition: .4s; }
|
||
|
|
#dialogueClose:hover { background: var(--color-fg-less); color: var(--color-bg-normal); }
|
||
|
|
|
||
|
|
#dialogue ul { margin-left: 1em; padding-left: 0; transition: .4s; }
|
||
|
|
#dialogue ul.minimized { height: 20px; background-color: var(--color-accent-normal);
|
||
|
|
background-size: 20px 20px;
|
||
|
|
background-image: repeating-linear-gradient(to right, var(--color-fg-normal), var(--color-fg-normal) 1px, var(--color-accent-normal) 1px, var(--color-accent-normal)); }
|
||
|
|
#dialogue ul.minimized > * { display: none; }
|