Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-02-04 08:50:33 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Various color picker improvements

Browse Source
This commit is contained in:
barsdeveloper
2022-10-22 23:06:37 +02:00
parent 14d376d447
commit acea290c9d
23 changed files with 562 additions and 279 deletions
Download Patch File Download Diff File Expand all files Collapse all files

50
scss/ueb-window.scss
View File

@@ -3,10 +3,12 @@
ueb-window {
display: block;
position: absolute;
border: 2px solid black;
top: 0;
left: 0;
transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
background: #242424;
box-shadow: 0 0 2px 0 #000000A0;
z-index: 1000;
}
@@ -19,6 +21,11 @@ ueb-window {
background: #1a1a1a;
}
.ueb-window-content {
padding: 10px;
border: 1px solid #303030;
}
.ueb-window-name {
flex-grow: 1;
padding-left: 28px;
@@ -62,20 +69,24 @@ ueb-window {
ueb-color-handler {
display: block;
position: absolute;
top: -3px;
left: -3px;
margin-top: -3px;
margin-left: -3px;
width: 4px;
height: 4px;
transform: translateX(calc(var(--ueb-position-x) * 1px)) translateY(calc(var(--ueb-position-y) * 1px));
border: 1px solid #000;
border-radius: 4px;
}
.ueb-color-picker-wheel ueb-color-handler {
left: var(--ueb-color-wheel-x);
top: var(--ueb-color-wheel-y);
}
.ueb-color-picker-saturation,
.ueb-color-picker-value {
margin: 0 6px;
padding-bottom: 10px;
width: 30px;
background-color: rgb(calc(var(--ueb-color-r) * 255), calc(var(--ueb-color-g) * 255), calc(var(--ueb-color-b) * 255));
}
.ueb-color-picker-saturation {
@@ -86,7 +97,8 @@ ueb-color-handler {
background-image: linear-gradient(to bottom, transparent 10px, #000000 100%);
}
.ueb-color-picker-slider {
ueb-color-slider {
display: block;
position: relative;
padding-bottom: 10px;
@@ -111,10 +123,34 @@ ueb-color-handler {
}
}
.ueb-color-picker-saturation .ueb-color-picker-slider {
.ueb-color-picker-saturation ueb-color-slider {
top: calc(100% - var(--ueb-color-s) * 100%)
}
.ueb-color-picker-value .ueb-color-picker-slider {
.ueb-color-picker-value ueb-color-slider {
top: calc(100% - var(--ueb-color-v) * 100%)
}
.ueb-color-picker-preview {
position: relative;
&::before,
&::after {
content: "";
display: block;
position: absolute;
top: 39px;
width: 5px;
border-top: 2px solid black;
}
&::after {
right: 0;
}
}
.ueb-color-picker-preview-old,
.ueb-color-picker-preview-new {
width: 100px;
height: 40px;
}