let5see/IOPaint
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style refine

Browse Source
This commit is contained in:
Sanster
2022-04-04 21:51:33 +08:00
parent 855fd1f006
commit 10b35a3f0a
33 changed files with 263 additions and 686 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
lama_cleaner/app/src/components/Editor/Editor.scss
View File

@@ -38,10 +38,10 @@
.editor-slider {
grid-area: original-image-content;
height: 100%;
width: 4px;
width: 6px;
justify-self: end;
background-color: var(--yellow-accent);
transition: all 350ms ease-in-out;
transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
z-index: 2;
}
}
@@ -52,17 +52,21 @@
}
.editor-toolkit-panel {
// width: 100%;
position: fixed;
bottom: 0;
padding: 1rem 4rem;
bottom: 0.5rem;
// border: 1px solid rgb(100, 100, 120, 0.5);
border-radius: 3rem;
padding: 1rem 3rem;
display: grid;
grid-template-areas: 'toolkit-size-selector toolkit-brush-slider toolkit-btns';
column-gap: 2rem;
align-items: center;
justify-content: center;
background-color: var(--editor-toolkit-bg);
backdrop-filter: blur(10px);
border-radius: 0.5rem 0.5rem 0 0;
backdrop-filter: blur(12px);
animation: slideUp 0.2s ease-out;
border: 1px solid rgb(100, 100, 120, 0.4);
@include mobile {
padding: 1rem 2rem;
@@ -73,6 +77,11 @@
row-gap: 2rem;
justify-items: center;
}
.eyeicon-active {
background-color: var(--yellow-accent);
color: var(--btn-text-hover-color);
}
}
.editor-brush-slider {
@@ -97,8 +106,8 @@
.brush-shape {
position: absolute;
border-radius: 50%;
background: rgba(255, 190, 0, 0.75);
border: 1px dashed var(--border-color);
background-color: #ffcc00bb;
border: 1px solid var(--yellow-accent);
pointer-events: none;
}
@@ -112,17 +121,21 @@
display: grid;
grid-template-columns: repeat(2, max-content);
align-items: center;
column-gap: 0.5rem;
}
.editor-size-selector-main {
@include accented-display(var(--yellow-accent));
display: grid;
grid-template-columns: repeat(2, max-content);
column-gap: 0.25rem;
@include accented-display(var(white));
user-select: none;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
outline: none;
gap: 8px;
width: 128px;
border: 1px solid var(--editor-size-border-color);
color: var(--options-text-color);
svg {
width: 1rem;
@@ -133,29 +146,45 @@
.editor-size-options {
@include accented-display(var(--btn-primary-bg));
width: 128px;
padding: 0;
display: grid;
justify-self: center;
margin-left: 2.7rem;
position: fixed;
bottom: 4rem;
cursor: pointer;
color: var(--options-text-color);
background-color: var(--page-bg);
border: 1px solid var(--editor-size-border-color);
border-radius: 0.6rem;
@include mobile {
bottom: 11.5rem;
margin-left: 2.9rem;
}
.editor-size-option {
display: flex;
align-items: center;
height: 40px;
user-select: none;
padding: 0.2rem 0.8rem;
border-bottom: 1px dashed var(--border-color);
border-radius: 0.5rem;
&:first-of-type {
border-top-right-radius: 0.5rem;
border-top-left-radius: 0.5rem;
}
&:last-of-type {
border-bottom: none;
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
&:hover {
background-color: var(--yellow-accent);
color: var(--btn-text-hover-color);
}
}
}