Ma/ueblueprint
1
0
Fork 0
mirror of https://github.com/barsdeveloper/ueblueprint.git synced 2026-05-17 19:03:27 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

Colors wip

Browse Source
This commit is contained in:
barsdeveloper
2022-11-03 21:56:38 +01:00
parent 37e2e8acf8
commit 5183aae21b
17 changed files with 771 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

145
dist/css/ueb-style.css vendored
View File

@@ -664,6 +664,65 @@ ueb-pin[data-type=vector] {
--ueb-pin-color-rgb: var(--ueb-pin-color-vector);
}
.ueb-vertical-slider > ueb-ui-slider {
position: relative;
padding-bottom: 10px;
}
.ueb-vertical-slider > ueb-ui-slider::before, .ueb-vertical-slider > ueb-ui-slider::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
.ueb-vertical-slider > ueb-ui-slider::before {
left: -4px;
border-left-color: #e0e0e0;
}
.ueb-vertical-slider > ueb-ui-slider::after {
right: -4px;
border-right-color: #e0e0e0;
}
.ueb-horizontal-slider {
position: relative;
border: 1px solid #383838;
border-radius: 6px;
padding: 1px;
background: #0f0f0f;
}
.ueb-horizontal-slider:hover {
cursor: ew-resize;
}
.ueb-horizontal-slider > ueb-ui-slider {
display: block;
position: relative;
height: 20px;
border-radius: 5px;
background: #383838;
}
.ueb-horizontal-slider-text {
position: absolute;
padding: 0 5px;
line-height: 20px;
z-index: 1;
}
.ueb-toggle-control::before {
content: "";
display: inline-block;
border-top: 5px solid #e0e0e0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
vertical-align: middle;
}
.ueb-toggle-control:hover {
cursor: pointer;
}
ueb-window {
display: block;
position: absolute;
@@ -741,44 +800,28 @@ ueb-color-handler {
.ueb-color-picker-value {
margin: 0 6px;
padding-bottom: 10px;
width: 30px;
width: 25px;
}
.ueb-color-picker-saturation {
margin-left: 25px;
background-image: linear-gradient(to bottom, transparent 10px, #FFFFFF 100%);
}
.ueb-color-picker-value {
margin-right: 25px;
background-image: linear-gradient(to bottom, transparent 10px, #000000 100%);
}
ueb-color-slider {
ueb-ui-slider {
display: block;
position: relative;
padding-bottom: 10px;
}
ueb-color-slider::before, ueb-color-slider::after {
content: "";
display: block;
position: absolute;
width: 0;
height: 0;
border: 5px solid transparent;
}
ueb-color-slider::before {
left: -4px;
border-left-color: #e0e0e0;
}
ueb-color-slider::after {
right: -4px;
border-right-color: #e0e0e0;
}
.ueb-color-picker-saturation ueb-color-slider {
.ueb-color-picker-saturation ueb-ui-slider {
top: calc(100% - var(--ueb-color-s) * 100%);
}
.ueb-color-picker-value ueb-color-slider {
.ueb-color-picker-value ueb-ui-slider {
top: calc(100% - var(--ueb-color-v) * 100%);
}
@@ -803,4 +846,62 @@ ueb-color-slider::after {
height: 40px;
}
.ueb-color-picker-advanced {
display: flex;
column-gap: 10px;
padding-top: 5px;
}
.ueb-color-picker-advanced .ueb-color-picker-column {
display: flex;
flex-direction: column;
justify-content: space-between;
flex-grow: 1;
}
.ueb-color-picker-advanced .ueb-color-picker-column > div {
display: flex;
align-items: center;
margin-bottom: 8px;
}
.ueb-color-picker-advanced .ueb-color-picker-column > div > div {
flex-grow: 1;
}
.ueb-color-picker-advanced .ueb-horizontal-slider {
flex-grow: 1;
}
.ueb-color-picker-r .ueb-horizontal-slider > ueb-ui-slider {
width: calc(var(--ueb-color-r) * 100%);
}
.ueb-color-picker-g .ueb-horizontal-slider > ueb-ui-slider {
width: calc(var(--ueb-color-g) * 100%);
}
.ueb-color-picker-b .ueb-horizontal-slider > ueb-ui-slider {
width: calc(var(--ueb-color-b) * 100%);
}
.ueb-color-picker-a .ueb-horizontal-slider > ueb-ui-slider {
width: calc(var(--ueb-color-a) * 100%);
}
.ueb-color-picker-h .ueb-horizontal-slider > ueb-ui-slider {
width: calc(var(--ueb-color-h) * 100%);
}
.ueb-color-picker-s .ueb-horizontal-slider > ueb-ui-slider {
width: calc(var(--ueb-color-s) * 100%);
}
.ueb-color-picker-v .ueb-horizontal-slider > ueb-ui-slider {
width: calc(var(--ueb-color-v) * 100%);
}
.ueb-color-picker-gradient {
height: 6px;
}
/*# sourceMappingURL=ueb-style.css.map */