Spaces:
Running
Running
| body { | |
| font-family: Arial, Helvetica, sans-serif; | |
| font-size: 11pt; | |
| background-color: rgb(32, 33, 36); | |
| color: #eee; | |
| } | |
| a { | |
| color: rgb(0, 102, 204); | |
| } | |
| a:visited { | |
| color: rgb(0, 102, 204); | |
| } | |
| label { | |
| font-size: 10pt; | |
| } | |
| #prompt { | |
| width: 100%; | |
| height: 65pt; | |
| box-sizing: border-box; | |
| } | |
| @media screen and (max-width: 600px) { | |
| #prompt { | |
| width: 95%; | |
| } | |
| } | |
| .image_preview_container { | |
| /* display: none; */ | |
| margin-top: 10pt; | |
| } | |
| .image_clear_btn { | |
| position: absolute; | |
| transform: translateX(-50%) translateY(-35%); | |
| background: black; | |
| color: white; | |
| border: 2pt solid #ccc; | |
| padding: 0; | |
| cursor: pointer; | |
| outline: inherit; | |
| border-radius: 8pt; | |
| width: 16pt; | |
| height: 16pt; | |
| font-family: Verdana; | |
| font-size: 8pt; | |
| } | |
| .settings-box ul { | |
| font-size: 9pt; | |
| margin-bottom: 5px; | |
| padding-left: 10px; | |
| list-style-type: none; | |
| } | |
| .settings-box li { | |
| padding-bottom: 4pt; | |
| } | |
| .editor-slider { | |
| vertical-align: middle; | |
| } | |
| .outputMsg { | |
| font-size: small; | |
| padding-bottom: 3pt; | |
| } | |
| #progressBar { | |
| font-size: small; | |
| } | |
| #footer { | |
| font-size: small; | |
| padding-left: 10pt; | |
| background: none; | |
| } | |
| #footer-legal { | |
| font-size: 8pt; | |
| } | |
| .imgSeedLabel { | |
| font-size: 0.8em; | |
| background-color: rgb(44, 45, 48); | |
| border-radius: 3px; | |
| padding: 5px; | |
| } | |
| .imgItem { | |
| display: inline-block; | |
| margin-top: 1em; | |
| margin-right: 1em; | |
| } | |
| .imgContainer { | |
| display: flex; | |
| justify-content: flex-end; | |
| } | |
| .imgItemInfo { | |
| padding-bottom: 0.5em; | |
| display: flex; | |
| align-items: flex-end; | |
| flex-direction: column; | |
| position: absolute; | |
| padding: 5px; | |
| opacity: 0; | |
| transition: 0.1s all; | |
| } | |
| .imgContainer:hover > .imgItemInfo { | |
| opacity: 1; | |
| } | |
| .imgItemInfo * { | |
| margin-bottom: 7px; | |
| } | |
| #container { | |
| width: 90%; | |
| margin-left: auto; | |
| margin-right: auto; | |
| } | |
| @media screen and (max-width: 1800px) { | |
| #container { | |
| width: 100%; | |
| } | |
| } | |
| #logo small { | |
| font-size: 11pt; | |
| } | |
| #editor { | |
| padding: 5px; | |
| } | |
| #editor label { | |
| font-weight: normal; | |
| } | |
| .settings-box label small { | |
| color: rgb(153, 153, 153); | |
| } | |
| #preview { | |
| padding: 5px; | |
| } | |
| #editor-inputs { | |
| margin-bottom: 20px; | |
| } | |
| #editor-inputs-prompt { | |
| flex: 1; | |
| } | |
| #editor-inputs .row { | |
| padding-bottom: 10px; | |
| } | |
| #makeImage { | |
| border-radius: 6px; | |
| } | |
| #editor-modifiers h5 { | |
| padding: 5pt 0; | |
| margin: 0; | |
| } | |
| #makeImage { | |
| flex: 0 0 70px; | |
| background: rgb(80, 0, 185); | |
| border: 2px solid rgb(40, 0, 78); | |
| color: rgb(255, 221, 255); | |
| width: 100%; | |
| height: 30pt; | |
| } | |
| #makeImage:hover { | |
| background: rgb(93, 0, 214); | |
| } | |
| #stopImage { | |
| flex: 0 0 70px; | |
| background: rgb(132, 8, 0); | |
| border: 2px solid rgb(122, 29, 0); | |
| color: rgb(255, 221, 255); | |
| width: 100%; | |
| height: 30pt; | |
| border-radius: 6px; | |
| display: none; | |
| } | |
| #stopImage:hover { | |
| background: rgb(177, 27, 0); | |
| } | |
| .flex-container { | |
| display: flex; | |
| } | |
| .col-50 { | |
| flex: 50%; | |
| } | |
| .col-fixed-10 { | |
| flex: 0 0 380pt; | |
| } | |
| .col-free { | |
| flex: 1; | |
| } | |
| .collapsible { | |
| cursor: pointer; | |
| } | |
| .collapsible-content { | |
| display: none; | |
| padding-left: 15px; | |
| } | |
| .collapsible-content h5 { | |
| padding: 5pt 0pt; | |
| margin: 0; | |
| font-size: 10pt; | |
| } | |
| .collapsible-handle { | |
| color: white; | |
| padding-right: 5px; | |
| } | |
| .panel-box { | |
| background: rgb(44, 45, 48); | |
| border: 1px solid rgb(47, 49, 53); | |
| border-radius: 7px; | |
| padding: 5px; | |
| margin-bottom: 15px; | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |
| } | |
| .panel-box h4 { | |
| margin: 0; | |
| padding: 2px 0; | |
| } | |
| #editor-modifiers .editor-modifiers-leaf { | |
| padding-top: 10pt; | |
| padding-bottom: 10pt; | |
| } | |
| #preview { | |
| margin-left: 10pt; | |
| } | |
| img { | |
| box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |
| } | |
| .line-separator { | |
| background: rgb(56, 56, 56); | |
| height: 1pt; | |
| margin: 15pt 0; | |
| } | |
| #editor-inputs-tags-container { | |
| margin-top: 5pt; | |
| display: none; | |
| } | |
| #server-status { | |
| display: inline; | |
| float: right; | |
| transform: translateY(-5pt); | |
| } | |
| #server-status-color { | |
| /* width: 8pt; | |
| height: 8pt; | |
| border-radius: 4pt; */ | |
| font-size: 14pt; | |
| color: rgb(128, 87, 0); | |
| /* background-color: rgb(197, 1, 1); */ | |
| /* transform: translateY(15%); */ | |
| display: inline; | |
| } | |
| #server-status-msg { | |
| color: rgb(128, 87, 0); | |
| padding-left: 2pt; | |
| font-size: 10pt; | |
| } | |
| .preview-prompt { | |
| font-size: 16pt; | |
| margin-bottom: 10pt; | |
| } | |
| #coffeeButton { | |
| height: 23px; | |
| transform: translateY(25%); | |
| } | |
| #inpaintingEditor { | |
| width: 300pt; | |
| height: 300pt; | |
| margin-top: 5pt; | |
| } | |
| .drawing-board-canvas-wrapper { | |
| background-size: 100% 100%; | |
| } | |
| .drawing-board-control > button { | |
| background-color: #eee; | |
| border-radius: 3pt; | |
| } | |
| .drawing-board-control-inner { | |
| background-color: #eee; | |
| border-radius: 3pt; | |
| } | |
| #inpaintingEditor canvas { | |
| opacity: 0.6; | |
| } | |
| #enable_mask { | |
| margin-top: 8pt; | |
| } | |
| #top-nav { | |
| padding-top: 3pt; | |
| padding-bottom: 15pt; | |
| } | |
| #top-nav .icon { | |
| padding-right: 4pt; | |
| font-size: 14pt; | |
| transform: translateY(1pt); | |
| } | |
| #logo { | |
| display: inline; | |
| } | |
| #logo h1 { | |
| display: inline; | |
| } | |
| #top-nav-items { | |
| list-style-type: none; | |
| display: inline; | |
| float: right; | |
| } | |
| #top-nav-items > li { | |
| float: left; | |
| display: inline; | |
| padding-left: 20pt; | |
| cursor: default; | |
| } | |
| #initial-text { | |
| padding-top: 15pt; | |
| padding-left: 4pt; | |
| } | |
| .settings-subheader { | |
| font-size: 10pt; | |
| font-weight: bold; | |
| } | |
| .pl-5 { | |
| padding-left: 5pt; | |
| } | |
| #system-settings { | |
| width: 360pt; | |
| transform: translateX(-100%) translateX(70pt); | |
| padding-top: 10pt; | |
| padding-bottom: 10pt; | |
| } | |
| #system-settings ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| #system-settings li { | |
| padding-left: 5pt; | |
| } | |
| #community-links { | |
| list-style-type: none; | |
| margin: 0; | |
| padding: 12pt; | |
| padding-bottom: 0pt; | |
| transform: translateX(-15%); | |
| } | |
| #community-links li { | |
| padding-bottom: 12pt; | |
| display: block; | |
| font-size: 10pt; | |
| } | |
| #community-links li .fa-fw { | |
| padding-right: 2pt; | |
| } | |
| #community-links li a { | |
| color: white; | |
| text-decoration: none; | |
| } | |
| .dropdown { | |
| overflow: hidden; | |
| } | |
| .dropdown-content { | |
| display: none; | |
| position: absolute; | |
| z-index: 2; | |
| background: rgb(18, 18, 19); | |
| border: 2px solid rgb(37, 38, 41); | |
| border-radius: 7px; | |
| padding: 5px; | |
| margin-bottom: 15px; | |
| box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |
| } | |
| .dropdown:hover .dropdown-content { | |
| display: block; | |
| } | |
| .imageTaskContainer { | |
| border: 1px solid #333; | |
| margin-bottom: 10pt; | |
| padding: 5pt; | |
| border-radius: 5pt; | |
| box-shadow: 0 20px 28px 0 rgba(0, 0, 0, 0.15), 0 6px 20px 0 rgba(0, 0, 0, 0.15); | |
| } | |
| .taskStatusLabel { | |
| float: left; | |
| font-size: 8pt; | |
| background:rgb(44, 45, 48); | |
| border: 1px solid rgb(61, 62, 66); | |
| padding: 2pt 4pt; | |
| border-radius: 2pt; | |
| margin-right: 5pt; | |
| } | |
| .activeTaskLabel { | |
| background:rgb(0, 90, 30); | |
| border: 1px solid rgb(0, 75, 19); | |
| color:rgb(204, 255, 217) | |
| } | |
| .secondaryButton { | |
| background: rgb(132, 8, 0); | |
| border: 1px solid rgb(122, 29, 0); | |
| color: rgb(255, 221, 255); | |
| padding: 3pt 6pt; | |
| border-radius: 5px; | |
| } | |
| .secondaryButton:hover { | |
| background: rgb(177, 27, 0); | |
| } | |
| .stopTask { | |
| float: right; | |
| } | |
| #preview-tools { | |
| display: none; | |
| padding: 4pt; | |
| } | |
| .taskConfig { | |
| font-size: 10pt; | |
| color: #aaa; | |
| margin-bottom: 5pt; | |
| } | |
| .img-batch { | |
| display: inline; | |
| } | |
| #prompt_from_file { | |
| display: none; | |
| } |