diff --git a/css/index.css b/css/index.css index f8c634e..3a36855 100644 --- a/css/index.css +++ b/css/index.css @@ -331,13 +331,48 @@ input#host { /* Prompt Fields */ +.content.prompt { + display: flex; + align-items: stretch; +} + +.content.prompt > .inputs { + width: 200px; +} + div.prompt-wrapper { + display: flex; + + width: calc(100%); + overflow: visible; } -div.prompt-wrapper > textarea { +div.prompt-wrapper > * { + flex-shrink: 0; +} + +div.prompt-wrapper textarea { margin: 0; - padding: 0; + + border-radius: 0; + + border: none; + + z-index: 1; +} + +div.prompt-wrapper:not(:first-child) textarea { + border-top: 1px solid black; +} + +div.prompt-wrapper > textarea { + box-sizing: border-box; + width: calc(100% - 20px); + + padding: 2px; + + transition-duration: 200ms; resize: vertical; } @@ -346,6 +381,198 @@ div.prompt-wrapper > textarea:focus { width: 700px; } +div.prompt-wrapper > .prompt-indicator { + display: flex; + + cursor: help; + + width: 20px; +} + +div.prompt-wrapper:first-child > .prompt-indicator { + border-top-left-radius: 5px; +} + +div.prompt-wrapper:last-child > .prompt-indicator { + border-bottom-left-radius: 5px; +} + +div.prompt-wrapper > .prompt-indicator.positive { + background-color: #484; +} + +div.prompt-wrapper > .prompt-indicator.negative { + background-color: #844; +} +div.prompt-wrapper > .prompt-indicator.styles { + background-color: #448; +} + +div.prompt-wrapper > .prompt-indicator::after { + content: ""; + display: block; + margin: auto; + + width: 16px; + height: 16px; + + background-color: var(--c-text); + + mask-size: contain; + -webkit-mask-size: contain; +} + +div.prompt-wrapper > .prompt-indicator.positive::after { + mask-image: url("/res/icons/plus-square.svg"); + -webkit-mask-image: url("/res/icons/plus-square.svg"); +} + +div.prompt-wrapper > .prompt-indicator.negative::after { + mask-image: url("/res/icons/minus-square.svg"); + -webkit-mask-image: url("/res/icons/minus-square.svg"); +} + +div.prompt-wrapper > .prompt-indicator.styles::after { + mask-image: url("/res/icons/library.svg"); + -webkit-mask-image: url("/res/icons/library.svg"); +} + +.prompt-history-wrapper { + position: relative; + + flex-shrink: 0; + + width: 20px; +} + +.prompt-history-container { + display: flex; + + position: absolute; + + top: 0; + left: 0; + + height: 100%; +} + +#prompt-history { + width: 0px; + height: 100%; + + transition-duration: 200ms; + + background-color: #1e1e50; +} + +#prompt-history.expanded { + width: 300px; +} + +#prompt-history .entry { + display: flex; + align-items: stretch; + justify-content: stretch; + + border: 1px #fff3; + + height: 25px; +} + +#prompt-history.expanded .entry > button { + padding: 2px; + padding-left: 5px; +} + +#prompt-history .entry > button { + flex: 1; + + cursor: pointer; + + margin: 0; + border: 0; + padding: 0; + + color: var(--c-text); + + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + + transition-duration: 100ms; +} + +#prompt-history .entry:hover > button:not(:hover) { + flex-grow: 0; + flex-shrink: 1; + flex-basis: 20%; + width: 20%; +} + +#prompt-history .entry > button.prompt { + background-color: #484; +} + +#prompt-history .entry > button.negative { + background-color: #844; +} + +#prompt-history .entry > button.styles { + background-color: #448; +} + +#prompt-history .entry > button:hover { + filter: brightness(115%); + backdrop-filter: brightness(115%); +} + +#prompt-history .entry > button:active { + filter: brightness(150%); + backdrop-filter: brightness(150%); +} + +button.prompt-history-btn { + cursor: pointer; + + border-radius: 0; + + border-top-right-radius: 5px; + border-bottom-right-radius: 5px; + + background-color: #1e1e50; + + margin: 0; + padding: 0; + border: 0; + + width: 20px; +} + +button.prompt-history-btn::after { + content: ""; + display: block; + margin: auto; + + width: 16px; + height: 16px; + + background-color: var(--c-text); + + mask-size: contain; + -webkit-mask-size: contain; + + mask-image: url("/res/icons/history.svg"); + -webkit-mask-image: url("/res/icons/history.svg"); +} + +button.prompt-history-btn:hover { + filter: brightness(115%); +} + +button.prompt-history-btn:active { + filter: brightness(150%); +} + /* Style Field */ select > .style-select-option { position: relative; diff --git a/index.html b/index.html index 77f031d..5e2a5c2 100644 --- a/index.html +++ b/index.html @@ -51,19 +51,31 @@ -
- -
-
- +
+
+
+
+ +
+
+
+ +
+
+
+
+
- -
- +
+
+
+ +
- -
-