Updated: Internal module "Color Picker" v2.1.4 -> v2.2.0

This commit is contained in:
nobody 2021-04-10 07:04:41 +02:00
parent 487d78c811
commit a41bce8ba4
No known key found for this signature in database
GPG Key ID: 8F6DE3D614FCFD7A
4 changed files with 889 additions and 634 deletions

View File

@ -1,5 +1,5 @@
_locales _locales
icons icons
modules/noto-sans/* modules/noto-sans/*
modules/color-picker/* modules/internal/color-picker/*
resources resources

View File

@ -6,40 +6,47 @@
.color-picker *::after { .color-picker *::after {
box-sizing: border-box; box-sizing: border-box;
} }
.color-picker { .color-picker {
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
z-index: 9999; z-index: 9999;
box-shadow: 1px 3px 6px rgba(0, 0, 0, .5); box-shadow: 1px 3px 6px rgba(0, 0, 0, 0.5);
} }
.color-picker > div { .color-picker > div {
display: flex; display: flex;
height: 10em; height: 10em;
border: 1px solid #000; border: 1px solid #000;
color: #000; color: #000;
} }
.color-picker > div * { .color-picker > div * {
border-color: inherit; border-color: inherit;
color: inherit; color: inherit;
} }
.color-picker i { .color-picker i {
font: inherit; font: inherit;
font-size: 12px; /* Measure the color picker control size by measuring the text size */ font-size: 12px;
/* Measure the color picker control size by measuring the text size */
} }
.color-picker\:a, .color-picker\:a,
.color-picker\:h, .color-picker\:h,
.color-picker\:sv { .color-picker\:sv {
background-size: 100% 100%; background-size: 100% 100%;
position: relative; position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
} }
.color-picker\:a,
.color-picker\:h {
width: 1.5em;
border-left: 1px solid;
cursor: ns-resize;
overflow: hidden;
}
.color-picker\:a div, .color-picker\:a div,
.color-picker\:h div, .color-picker\:h div,
.color-picker\:sv div { .color-picker\:sv div {
@ -49,6 +56,15 @@
bottom: 0; bottom: 0;
left: 0; left: 0;
} }
.color-picker\:a,
.color-picker\:h {
width: 1.5em;
border-left: 1px solid;
cursor: ns-resize;
overflow: hidden;
}
.color-picker\:a i, .color-picker\:a i,
.color-picker\:h i { .color-picker\:h i {
display: block; display: block;
@ -59,6 +75,7 @@
left: 0; left: 0;
z-index: 2; z-index: 2;
} }
.color-picker\:a i::before, .color-picker\:a i::before,
.color-picker\:h i::before { .color-picker\:h i::before {
display: block; display: block;
@ -68,15 +85,40 @@
right: 0; right: 0;
bottom: 0; bottom: 0;
left: 0; left: 0;
border:.25em solid; border: .25em solid;
border-top-color: transparent; border-top-color: transparent;
border-bottom-color: transparent; border-bottom-color: transparent;
} }
.color-picker\:a div {
z-index: 2;
}
.color-picker\:a div + div {
background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%);
background-size: .5em .5em;
background-position: 0 0, .25em .25em;
z-index: 1;
}
.color-picker\:h div {
background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.color-picker\:sv { .color-picker\:sv {
width: 10em; width: 10em;
cursor: crosshair; cursor: crosshair;
overflow: hidden; overflow: hidden;
} }
.color-picker\:sv div + div {
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.color-picker\:sv div + div + div {
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.color-picker\:sv i { .color-picker\:sv i {
display: block; display: block;
width: .75em; width: .75em;
@ -86,6 +128,7 @@
right: -.375em; right: -.375em;
z-index: 2; z-index: 2;
} }
.color-picker\:sv i::before { .color-picker\:sv i::before {
display: block; display: block;
content: ""; content: "";
@ -98,32 +141,3 @@
border-radius: 100%; border-radius: 100%;
box-shadow: 0 0 2px #000; box-shadow: 0 0 2px #000;
} }
.color-picker\:a div {
z-index: 2;
}
.color-picker\:a div + div {
background-image: linear-gradient(45deg, #ddd 25%, transparent 25%, transparent 75%, #ddd 75%, #ddd 100%), linear-gradient(45deg, #ddd 25%, #fff 25%, #fff 75%, #ddd 75%, #ddd 100%);
background-size: .5em .5em;
background-position: 0 0, .25em .25em;
z-index: 1;
}
.color-picker\:h div {
background-image: linear-gradient(to top, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.color-picker\:sv div + div {
background-image: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
}
.color-picker\:sv div + div + div {
background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
}
.color-picker\:a,
.color-picker\:h,
.color-picker\:sv {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
}

File diff suppressed because it is too large Load Diff

View File

@ -58,6 +58,7 @@
<li>Updated: angular-material v1.2.1 -> v1.2.2 (<a href="https://codeberg.org/nobody/LocalCDN/issues/363">#363</a>)</li> <li>Updated: angular-material v1.2.1 -> v1.2.2 (<a href="https://codeberg.org/nobody/LocalCDN/issues/363">#363</a>)</li>
<li>Updated: vue-i18n v8.24.2 -> v8.24.3 (<a href="https://codeberg.org/nobody/LocalCDN/issues/366">#366</a>)</li> <li>Updated: vue-i18n v8.24.2 -> v8.24.3 (<a href="https://codeberg.org/nobody/LocalCDN/issues/366">#366</a>)</li>
<li>Updated: angular-ui-select v0.19.8 (<a href="https://codeberg.org/nobody/LocalCDN/issues/367">#367</a>)</li> <li>Updated: angular-ui-select v0.19.8 (<a href="https://codeberg.org/nobody/LocalCDN/issues/367">#367</a>)</li>
<li>Updated: Internal module "Color Picker" v2.1.4 -> v2.2.0</li>
</ul> </ul>
<div id="generator-section"> <div id="generator-section">
<div class="topic-label"> <div class="topic-label">