button restyling
Daniele
parent
ee9ecf8143
commit
027e0a3865
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#32cd32;}.cls-3{fill:none;}.cls-4{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="check_all"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25,3.25,3.25,0,0,0-3.25-3.25Zm-.86,5.23L11,13.78a.19.19,0,0,1,0-.26l.38-.38a.19.19,0,0,1,.26,0l1,1,2.23-2.23a.19.19,0,0,1,.26,0l.38.38a.19.19,0,0,1,0,.26l-2.74,2.74A.19.19,0,0,1,12.46,15.29Z"/><path class="cls-3" d="M3.74,7.78,9,10.46l5.26-2.68L16.56,9c.06,0,.09.07.09.11v-4s0,.08-.09.11L9.21,8.91a.45.45,0,0,1-.42,0L1.44,5.18c-.12-.07-.12-.17,0-.23L8.79,1.21A.5.5,0,0,1,9,1.16H1.35v7.9s0-.08.09-.11Z"/><path class="cls-3" d="M1.44,13.18q-.09-.06-.09-.12V17H9a.39.39,0,0,1-.21-.06Z"/><path class="cls-3" d="M9.21,16.91A.39.39,0,0,1,9,17h3a3.94,3.94,0,0,1-1.3-.8Z"/><path class="cls-3" d="M16.56,5c.06,0,.09.07.09.11V1.16H9a.5.5,0,0,1,.21.05Z"/><path class="cls-3" d="M15.16,9.89a4,4,0,0,1,1.49,1.41V9.06s0,.08-.09.12Z"/><path class="cls-3" d="M3.74,11.78,9,14.46l.53-.27a3.59,3.59,0,0,1-.12-.88,3.19,3.19,0,0,1,.06-.53l-.26.13a.45.45,0,0,1-.42,0L1.44,9.18q-.09-.06-.09-.12v4s0-.08.09-.11Z"/><path class="cls-4" d="M1.44,5c-.12.06-.12.16,0,.23L8.79,8.91a.45.45,0,0,0,.42,0l7.35-3.74c.06,0,.09-.07.09-.11h0s0-.08-.09-.11L9.21,1.21A.5.5,0,0,0,9,1.16H9a.5.5,0,0,0-.21.05Z"/><path class="cls-4" d="M10.69,16.17a3.84,3.84,0,0,1-1.16-2L9,14.46,3.74,11.78,1.44,13c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.4.4,0,0,0,.42,0Z"/><path class="cls-4" d="M8.79,12.91a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12h0s0-.08-.09-.11l-2.3-1.17L9,10.46,3.74,7.78,1.44,9c-.06,0-.09.07-.09.11s0,.08.09.12Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#32cd32;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="check_one"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25,3.25,3.25,0,0,0-3.25-3.25Zm-.86,5.23L11,13.78a.19.19,0,0,1,0-.26l.38-.38a.19.19,0,0,1,.26,0l1,1,2.23-2.23a.19.19,0,0,1,.26,0l.38.38a.19.19,0,0,1,0,.26l-2.74,2.74A.19.19,0,0,1,12.46,15.29Z"/><path class="cls-3" d="M16.65,9.06s0-.08-.09-.11L9.21,5.21a.51.51,0,0,0-.42,0L3.71,7.8,1.44,9c-.12.06-.12.16,0,.23l7.35,3.73a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 770 B |
|
|
@ -0,0 +1,14 @@
|
|||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 26.0.3, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 18 18" style="enable-background:new 0 0 18 18;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#FFFFFF;fill-opacity:0;}
|
||||
.st1{fill:#FFFFFF;}
|
||||
</style>
|
||||
<rect id="Canvas" class="st0" width="18" height="18"/>
|
||||
<path class="st1" d="M9,6C7.3,6,6,7.3,6,9s1.3,3,3,3s3-1.3,3-3S10.7,6,9,6z"/>
|
||||
<path class="st1" d="M16.5,4h-3l-1.7-1.8C11.7,2.1,11.6,2,11.4,2H6.6C6.4,2,6.3,2.1,6.2,2.2L4.5,4h-3C1.2,4,1,4.2,1,4.5v10
|
||||
C1,14.8,1.2,15,1.5,15h15c0.3,0,0.5-0.2,0.5-0.5v-10C17,4.2,16.8,4,16.5,4z M9,13.1c-2.3,0-4.1-1.8-4.1-4.1c0-2.3,1.8-4.1,4.1-4.1
|
||||
c2.3,0,4.1,1.8,4.1,4.1S11.3,13.1,9,13.1L9,13.1z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 873 B |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#ff4500;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="cross_all"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25A3.25,3.25,0,0,0,13.32,10.06ZM15,14.55a.31.31,0,0,1-.44.44l-1.23-1.24L12.08,15h0a.31.31,0,0,1-.44-.44l1.24-1.24-1.24-1.23a.31.31,0,0,1,0-.44.31.31,0,0,1,.44,0l1.24,1.23,1.23-1.23h0a.3.3,0,0,1,.44,0,.3.3,0,0,1,0,.44l-1.23,1.23Z"/><path class="cls-3" d="M16.56,5,9.21,1.21A.5.5,0,0,0,9,1.16H9a.5.5,0,0,0-.21.05L1.44,5c-.12.06-.12.16,0,.23L8.79,8.91a.45.45,0,0,0,.42,0l7.35-3.74c.06,0,.09-.07.09-.11h0S16.62,5,16.56,5Z"/><path class="cls-3" d="M9,14.46,3.74,11.78,1.44,13c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.4.4,0,0,0,.42,0l1.48-.74a3.84,3.84,0,0,1-1.16-2Z"/><path class="cls-3" d="M14.26,7.78,9,10.46,3.74,7.78,1.44,9c-.06,0-.09.07-.09.11s0,.08.09.12l7.35,3.73a.45.45,0,0,0,.42,0l.26-.13a3.89,3.89,0,0,1,3.85-3.37,3.82,3.82,0,0,1,1.84.48l1.4-.71q.09-.06.09-.12h0s0-.08-.09-.11Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 1.1 KiB |
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 18 18"><defs><style>.cls-1{fill:#ff13dc;fill-opacity:0;}.cls-2{fill:#ff4500;}.cls-3{fill:#464646;}</style></defs><g id="Layer_2" data-name="Layer 2"><g id="cross_one"><rect id="Canvas" class="cls-1" width="18" height="18"/><path class="cls-2" d="M13.32,10.06a3.25,3.25,0,1,0,3.25,3.25A3.25,3.25,0,0,0,13.32,10.06ZM15,14.55a.31.31,0,0,1-.44.44l-1.23-1.24L12.08,15h0a.31.31,0,0,1-.44-.44l1.24-1.24-1.24-1.23a.31.31,0,0,1,0-.44.31.31,0,0,1,.44,0l1.24,1.23,1.23-1.23h0a.3.3,0,0,1,.44,0,.3.3,0,0,1,0,.44l-1.23,1.23Z"/><path class="cls-3" d="M16.65,9h0s0-.08-.09-.11L9.21,5.15a.45.45,0,0,0-.42,0L1.44,8.89c-.12.06-.12.16,0,.22l7.35,3.74a.45.45,0,0,0,.42,0l.26-.13a3.91,3.91,0,0,1,3.85-3.31,3.84,3.84,0,0,1,1.78.44l1.46-.74C16.62,9.08,16.65,9,16.65,9Z"/></g></g></svg>
|
||||
|
After Width: | Height: | Size: 814 B |
Binary file not shown.
|
After Width: | Height: | Size: 536 B |
77
index.html
77
index.html
|
|
@ -137,9 +137,7 @@
|
|||
background-color: #777;
|
||||
color: white;
|
||||
cursor: pointer;
|
||||
|
||||
border: none;
|
||||
|
||||
text-align: left;
|
||||
outline: none;
|
||||
font-size: 15px;
|
||||
|
|
@ -424,8 +422,8 @@
|
|||
|
||||
.acceptAllImgBtn {
|
||||
font-family: Arial, Verdana;
|
||||
background-image: url(./icon/accept_all.png);
|
||||
background-color: transparent;
|
||||
background-image: url(./icon/accept_all.svg);
|
||||
background-color: #777;
|
||||
background-size: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -434,8 +432,8 @@
|
|||
|
||||
.acceptSelectedImgBtn {
|
||||
font-family: Arial, Verdana;
|
||||
background-image: url(./icon/accept_selected.png);
|
||||
background-color: transparent;
|
||||
background-image: url(./icon/accept_selected.svg);
|
||||
background-color: #777;
|
||||
background-size: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -444,8 +442,8 @@
|
|||
|
||||
.discardAllImgBtn {
|
||||
font-family: Arial, Verdana;
|
||||
background-image: url(./icon/discard_all_border.png);
|
||||
background-color: transparent;
|
||||
background-image: url(./icon/discard_all.svg);
|
||||
background-color: #777;
|
||||
background-size: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -454,9 +452,9 @@
|
|||
|
||||
.discardSelectedImgBtn {
|
||||
font-family: Arial, Verdana;
|
||||
background-image: url(./icon/discard_selected_border.png);
|
||||
background-color: transparent;
|
||||
background-size: 24px;
|
||||
background-image: url(./icon/discard_selected.svg);
|
||||
background-color: #777;
|
||||
background-size: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
background-repeat: no-repeat;
|
||||
|
|
@ -464,8 +462,8 @@
|
|||
|
||||
.resetButton {
|
||||
font-family: Arial, Verdana;
|
||||
background-image: url(./icon/reset_settings.png);
|
||||
background-color: transparent;
|
||||
background-image: url(./icon/reset_settings2.png);
|
||||
background-color: #777;
|
||||
background-size: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -474,8 +472,8 @@
|
|||
|
||||
.snapshotButton {
|
||||
font-family: Arial, Verdana;
|
||||
background-image: url(./icon/camera_icon.png);
|
||||
background-color: transparent;
|
||||
background-image: url(./icon/camera_icon.svg);
|
||||
background-color: #777;
|
||||
background-size: 30px;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
|
|
@ -532,27 +530,16 @@
|
|||
</div>
|
||||
<div></div>
|
||||
<div>
|
||||
<button class="btnSquare" id="btnSetMaskViewer">
|
||||
Set Mask
|
||||
</button>
|
||||
<button class="btnSquare" id="btnSetInitImageViewer">
|
||||
Set Init Image
|
||||
</button>
|
||||
<button class="btnSquare btnGenerateClass" id="btnGenerate">
|
||||
Generate txt2img
|
||||
</button>
|
||||
<button class="btnSquare" id="btnSetMaskViewer"> Set Mask </button>
|
||||
<button class="btnSquare" id="btnSetInitImageViewer"> Set Init Image </button>
|
||||
<button class="btnSquare btnGenerateClass" id="btnGenerate"> Generate txt2img </button>
|
||||
<button
|
||||
class="btnSquare btnInterruptClass"
|
||||
id="btnInterruptViewer"
|
||||
style="display: none"
|
||||
>
|
||||
Interrupt
|
||||
</button>
|
||||
<button class="btnSquare" id="btnSelectionArea">
|
||||
Selection Area
|
||||
</button>
|
||||
|
||||
<div style="display: flex; justify-content: space-between">
|
||||
> Interrupt </button>
|
||||
<button class="btnSquare" id="btnSelectionArea"> Selection Area </button>
|
||||
<div style="display: flex; justify-content: flex-start; padding-top: 3px;">
|
||||
<!-- <button class="btnSquare acceptClass acceptAllImgBtn" style="display:none;">Accept All</button>
|
||||
<button class="btnSquare discardClass discardAllImgBtn" style="display:none;">Discard All</button>
|
||||
<button class="btnSquare acceptSelectedClass acceptSelectedImgBtn" style="display:none;">Accept Selected</button>
|
||||
|
|
@ -560,22 +547,22 @@
|
|||
<button
|
||||
title="Keep all generated images on the canvas"
|
||||
class="btnSquare acceptClass acceptAllImgBtn"
|
||||
style="display: none"
|
||||
style="display: none; margin-right: 3px;"
|
||||
></button>
|
||||
<button
|
||||
title="Delete all generated images from the canvas"
|
||||
class="btnSquare discardClass discardAllImgBtn"
|
||||
style="display: none"
|
||||
style="display: none; margin-right: 3px;"
|
||||
></button>
|
||||
<button
|
||||
title="Keep only the highlighted images"
|
||||
class="btnSquare acceptSelectedClass acceptSelectedImgBtn"
|
||||
style="display: none"
|
||||
style="display: none; margin-right: 3px;"
|
||||
></button>
|
||||
<button
|
||||
title="Delete only the highlighted images"
|
||||
class="btnSquare discardSelectedClass discardSelectedImgBtn"
|
||||
style="display: none"
|
||||
style="display: none; margin-right: 3px;"
|
||||
></button>
|
||||
</div>
|
||||
|
||||
|
|
@ -810,7 +797,7 @@
|
|||
id="sp-stable-diffusion-ui-tab-page"
|
||||
>
|
||||
<div id="menu-bar-container">
|
||||
<sp-picker size="m" label="Selection type">
|
||||
<sp-picker size="m" label="Selection type" style="margin-right: 3px;">
|
||||
<sp-menu id="mModelsMenu" slot="options">
|
||||
<!-- <sp-menu-item> item </sp-menu-item> -->
|
||||
</sp-menu>
|
||||
|
|
@ -846,6 +833,7 @@
|
|||
<button
|
||||
class="btnSquare"
|
||||
id="btnLayerToSelection"
|
||||
style="margin-right: 3px;"
|
||||
title="Move and reSize the highlighted layer to fit into the Selection Area "
|
||||
>
|
||||
L2S
|
||||
|
|
@ -869,33 +857,30 @@
|
|||
<div
|
||||
style="
|
||||
display: inline-flex;
|
||||
justify-content: space-between;
|
||||
justify-content: flex-start;
|
||||
width: 133px;
|
||||
"
|
||||
>
|
||||
<button
|
||||
class="btnSquare acceptClass acceptAllImgBtn"
|
||||
style="display: none"
|
||||
style="display: none; margin-right: 3px"
|
||||
></button>
|
||||
<button
|
||||
class="btnSquare discardClass discardAllImgBtn"
|
||||
style="display: none"
|
||||
style="display: none; margin-right: 3px"
|
||||
></button>
|
||||
<!-- <button class="btnSquare customClass" style="display:none;">Accept Selected</button> -->
|
||||
<button
|
||||
class="btnSquare snapshotButton"
|
||||
id="btnSnapshot"
|
||||
style="margin-right: 3px;"
|
||||
title="create a snapshot of what you see on the canvas and place on a new layer"
|
||||
>
|
||||
Snapshot
|
||||
</button>
|
||||
></button>
|
||||
<button
|
||||
class="btnSquare resetButton"
|
||||
id="btnResetSettings"
|
||||
title="reset the ui settings to their default values"
|
||||
>
|
||||
Reset Settings
|
||||
</button>
|
||||
></button>
|
||||
|
||||
<!-- <button class="btnSquare" id="btnLinkCurrentDocument">Link Current Document</button> -->
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in New Issue