openOutpaint/css/index.css
Victor Seiji Hariki ec59cf5538 Very crude settings interface
Very crude settings interface with only canvas size for now. Canvas size
only affects canvas on next page load. Dynamic resizing in the horizon,
but will take a while.

Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
2022-12-08 18:38:55 -03:00

378 lines
5.7 KiB
CSS

* {
font-size: 100%;
font-family: Arial, Helvetica, sans-serif;
user-select: none;
}
input,
textarea {
user-select: auto;
}
/* Body is stuck with no scroll */
body {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow: clip;
}
.invisible {
display: none !important;
}
.collapsible {
background-color: rgb(0, 0, 0);
color: rgb(255, 255, 255);
border-radius: 5px;
cursor: pointer;
width: 100%;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.display-none {
display: none;
}
.collapsible:hover {
background-color: #777;
}
.content {
max-height: 0;
overflow-y: clip;
overflow-x: visible;
transition: max-height 0.2s ease-out, height 0s ease-out;
}
.menu-container {
background-color: rgba(255, 255, 255, 0.5);
padding-left: 10px;
padding-right: 10px;
padding-top: 5px;
padding-bottom: 5px;
color: black;
border: solid;
border-top: none;
border-color: black;
font-size: medium;
text-align: left;
max-height: fit-content;
overflow: visible;
cursor: auto;
}
#page-overlay-wrapper {
position: fixed;
display: flex;
align-items: center;
justify-content: center;
top: 0;
left: 0;
bottom: 0;
right: 0;
background-color: #fff6;
backdrop-filter: blur(5px);
transition-duration: 50ms;
z-index: 1000;
}
.page-overlay-window {
display: flex;
flex-direction: column;
align-items: stretch;
border-radius: 10px;
color: var(--c-text);
overflow: hidden;
position: absolute;
margin: auto;
background-color: var(--c-primary);
}
.page-overlay-window .close {
position: absolute;
cursor: pointer;
top: 0;
right: 0;
margin: 5px;
width: 25px;
height: 25px;
-webkit-mask-image: url("/res/icon/x.svg");
mask-image: url("/res/icons/x.svg");
background-color: var(--c-text);
}
.page-overlay-window .close:hover {
transform: scale(1.1);
}
.page-overlay-window .title {
padding: 10px;
padding-top: 7px;
font-size: large;
font-weight: bold;
margin: auto;
background-color: var(--c-primary);
}
#page-overlay {
border: 0;
max-width: 300px;
max-height: 400px;
width: 100%;
height: 100%;
}
/* Mask colors for mask inversion */
/* Filters are some magic acquired at https://codepen.io/sosuke/pen/Pjoqqp */
.mask-canvas {
opacity: 0%;
}
.mask-canvas.display {
opacity: 40%;
filter: invert(100%);
}
.mask-canvas.display.opaque {
opacity: 100%;
}
.mask-canvas.display.clear {
filter: invert(71%) sepia(46%) saturate(6615%) hue-rotate(321deg)
brightness(106%) contrast(100%);
}
.mask-canvas.display.hold {
filter: invert(41%) sepia(16%) saturate(5181%) hue-rotate(218deg)
brightness(103%) contrast(108%);
}
.wideSelect {
width: 100%;
text-overflow: ellipsis;
}
/* Host input */
.host-field-wrapper {
position: relative;
display: flex;
align-items: stretch;
justify-content: space-between;
width: 100%;
}
.host-field-wrapper input {
flex-shrink: 0;
width: calc(100% - 15px);
display: block;
border: 0;
}
.host-field-wrapper .connection-status {
width: 15px;
position: absolute;
left: calc(100% - 15px);
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
box-sizing: inherit;
cursor: pointer;
transition-duration: 50ms;
padding-top: 1px;
padding-bottom: 1px;
overflow: hidden;
}
.host-field-wrapper .connection-status:active,
.host-field-wrapper .connection-status:hover {
width: fit-content;
padding-left: 5px;
padding-right: 6px;
filter: brightness(110%);
}
.host-field-wrapper .connection-status:active {
filter: brightness(80%);
}
.host-field-wrapper .connection-status > #connection-status-indicator-text {
opacity: 0%;
transition-duration: 20ms;
}
.host-field-wrapper
.connection-status:hover
> #connection-status-indicator-text {
opacity: 100%;
}
.host-field-wrapper .connection-status.online {
background-color: #49dd49;
color: #1f3f1f;
}
.host-field-wrapper .connection-status.offline {
background-color: #dd4949;
color: #3f1f1f;
}
.host-field-wrapper .connection-status.cors-issue {
background-color: #dddd49;
color: #3f3f1f;
}
.host-field-wrapper .connection-status.before {
background-color: #777;
color: #1f1f1f;
}
input#host {
box-sizing: border-box;
}
/* Settings button */
.ui.icon.header-button {
padding: 0;
border: 0;
cursor: pointer;
background-color: transparent;
}
.ui.icon.header-button > *:first-child {
background-color: black;
-webkit-mask-size: contain;
mask-size: contain;
width: 28px;
height: 28px;
transition-duration: 30ms;
}
.ui.icon.header-button:hover > *:last-child {
transform: scale(1.1);
}
/* Prompt Fields */
div.prompt-wrapper {
overflow: visible;
}
div.prompt-wrapper > textarea {
margin: 0;
padding: 0;
resize: vertical;
}
div.prompt-wrapper > textarea:focus {
width: 700px;
}
/* Style Field */
select > .style-select-option {
position: relative;
cursor: pointer;
}
select > .style-select-option:hover {
background-color: #999;
}
select > .style-select-option:active {
background-color: #aaa;
}
/* Tool buttons */
.button-array {
display: flex;
justify-content: stretch;
}
.button-array > .button.tool {
flex: 1;
border-radius: 0;
}
.button-array > .button.tool:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
.button-array > .button.tool:last-child {
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
.button.tool {
background-color: rgb(0, 0, 50);
color: rgb(255, 255, 255);
cursor: pointer;
border: none;
text-align: center;
outline: none;
font-size: 15px;
padding: 5px;
margin-top: 5px;
margin-bottom: 5px;
}
.button.tool:disabled {
background-color: #666 !important;
cursor: default;
}
.button.tool:hover {
background-color: rgb(30, 30, 80);
}
.button.tool:active,
.button.tool.active {
background-color: rgb(60, 60, 130);
}