012f6ae272
Signed-off-by: Victor Seiji Hariki <victorseijih@gmail.com>
378 lines
5.7 KiB
CSS
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/icons/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.webui-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);
|
|
}
|