From a46fd857ea3e782f1ac370614bf444757c6a5b96 Mon Sep 17 00:00:00 2001 From: Konstantin Kireyev Date: Wed, 15 Jan 2025 04:02:45 +0500 Subject: [PATCH] chore: move range inputs to draw.less --- apps/common/mobile/resources/less/common.less | 50 ------------------- apps/common/mobile/resources/less/draw.less | 50 +++++++++++++++++++ 2 files changed, 50 insertions(+), 50 deletions(-) diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less index 01fbb6364e..5ad83b801d 100644 --- a/apps/common/mobile/resources/less/common.less +++ b/apps/common/mobile/resources/less/common.less @@ -558,56 +558,6 @@ } } -.line-size-range--ios { - appearance: none; - width: 100%; - height: 24px; - background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQzIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMzQzIDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCAxMkMwIDEwLjg4NjEgMC44ODU3NSA5Ljk3NDE4IDEuOTk5MTUgOS45NDE3MkwzMzEuMDA1IDAuMzQ5NzA2QzMzNy41NzIgMC4xNTgyNCAzNDMgNS40Mjk5MiAzNDMgMTJDMzQzIDE4LjU3MDEgMzM3LjU3MiAyMy44NDE4IDMzMS4wMDUgMjMuNjUwM0wxLjk5OTE1IDE0LjA1ODNDMC44ODU3NTQgMTQuMDI1OCAwIDEzLjExMzkgMCAxMloiIGZpbGw9IiNBRUFFQjIiLz4KPC9zdmc+Cg==); - background-size: 100% 24px; - background-repeat: no-repeat; -} - -.opacity-range-input--ios { - appearance: none; - width: 100%; - height: 24px; - border-radius: 30px; - background: linear-gradient(90deg, transparent, var(--color)), - linear-gradient(#9797971A, #9797971A), - url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAA40lEQVR4Xu3bQQ6EQAhEUbj/oXsO8Sdh4XOvJAi/qkF3Zt6E6710++xuiD6T40uACtACqYlzD2IACFKBkoHcgmSQDJJBMngKIT6ADygF6DSYfcCLTzg/z0eGrASogDbT0gKxB2MB5pkiBoBgrEEMwIBjLx9fAAiCIAhygmkkRgYjhWMHditsL2AvYC+QIHjdwzk+BmAABmBAWc1kCF0bKRAEQRAEQRAMGaACbaCUz/P5BRiKxhQaiV07uRjfYgQDMKDpGAhGCMUCzD4CBEEw1iAGYIBPZMJh+g8/P8cKpAJfV4EfMee/sLtaEFIAAAAASUVORK5CYII=); - background-size: 100%, 100%, 32px; -} - -.opacity-range-input--ios::-webkit-slider-thumb, .line-size-range--ios::-webkit-slider-thumb { - appearance: none; - width: 28px; - height: 28px; - border: 0.5px solid rgba(116, 116, 128, 0.08); - border-radius: 50%; - background: #fff; - box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.03), - 0 1px 1px 0 rgba(0, 0, 0, 0.01), - 0 3px 8px 0 rgba(0, 0, 0, 0.1); -} - -.opacity-range-input--android { - appearance: none; - width: 100%; - height: 16px; - border-radius: 8px; - box-shadow: 0 0 0 0.5px #0000001F; - background: linear-gradient(90deg, #C4C4C4, var(--color)); -} - -.opacity-range-input--android::-webkit-slider-thumb { - appearance: none; - width: 20px; - height: 20px; - border-radius: 50%; - background: #fff; - box-shadow: 0 1px 3px 0 #00000033, 0 2px 2px 0 #0000001F, 0 0 2px 0 #00000024; -} - #color-picker { display: flex; justify-content: space-around; diff --git a/apps/common/mobile/resources/less/draw.less b/apps/common/mobile/resources/less/draw.less index 72f36334c2..c5ebd5cc29 100644 --- a/apps/common/mobile/resources/less/draw.less +++ b/apps/common/mobile/resources/less/draw.less @@ -147,4 +147,54 @@ background-color: @background-menu-divider; } } +} + +.line-size-range--ios { + appearance: none; + width: 100%; + height: 24px; + background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMzQzIiBoZWlnaHQ9IjI0IiB2aWV3Qm94PSIwIDAgMzQzIDI0IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPgo8cGF0aCBkPSJNMCAxMkMwIDEwLjg4NjEgMC44ODU3NSA5Ljk3NDE4IDEuOTk5MTUgOS45NDE3MkwzMzEuMDA1IDAuMzQ5NzA2QzMzNy41NzIgMC4xNTgyNCAzNDMgNS40Mjk5MiAzNDMgMTJDMzQzIDE4LjU3MDEgMzM3LjU3MiAyMy44NDE4IDMzMS4wMDUgMjMuNjUwM0wxLjk5OTE1IDE0LjA1ODNDMC44ODU3NTQgMTQuMDI1OCAwIDEzLjExMzkgMCAxMloiIGZpbGw9IiNBRUFFQjIiLz4KPC9zdmc+Cg==); + background-size: 100% 24px; + background-repeat: no-repeat; +} + +.opacity-range-input--ios { + appearance: none; + width: 100%; + height: 24px; + border-radius: 30px; + background: linear-gradient(90deg, transparent, var(--color)), + linear-gradient(#9797971A, #9797971A), + url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAEsWlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iWE1QIENvcmUgNS41LjAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIgogICAgeG1sbnM6dGlmZj0iaHR0cDovL25zLmFkb2JlLmNvbS90aWZmLzEuMC8iCiAgICB4bWxuczpleGlmPSJodHRwOi8vbnMuYWRvYmUuY29tL2V4aWYvMS4wLyIKICAgIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIKICAgIHhtbG5zOnhtcD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wLyIKICAgIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIgogICAgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIKICAgdGlmZjpJbWFnZUxlbmd0aD0iNjQiCiAgIHRpZmY6SW1hZ2VXaWR0aD0iNjQiCiAgIHRpZmY6UmVzb2x1dGlvblVuaXQ9IjIiCiAgIHRpZmY6WFJlc29sdXRpb249IjcyLzEiCiAgIHRpZmY6WVJlc29sdXRpb249IjcyLzEiCiAgIGV4aWY6UGl4ZWxYRGltZW5zaW9uPSI2NCIKICAgZXhpZjpQaXhlbFlEaW1lbnNpb249IjY0IgogICBleGlmOkNvbG9yU3BhY2U9IjEiCiAgIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiCiAgIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIKICAgeG1wOk1vZGlmeURhdGU9IjIwMjUtMDEtMTVUMDM6NTY6MjIrMDU6MDAiCiAgIHhtcDpNZXRhZGF0YURhdGU9IjIwMjUtMDEtMTVUMDM6NTY6MjIrMDU6MDAiPgogICA8eG1wTU06SGlzdG9yeT4KICAgIDxyZGY6U2VxPgogICAgIDxyZGY6bGkKICAgICAgc3RFdnQ6YWN0aW9uPSJwcm9kdWNlZCIKICAgICAgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWZmaW5pdHkgUGhvdG8gMiAyLjUuNSIKICAgICAgc3RFdnQ6d2hlbj0iMjAyNS0wMS0xNVQwMzo1NjoyMiswNTowMCIvPgogICAgPC9yZGY6U2VxPgogICA8L3htcE1NOkhpc3Rvcnk+CiAgPC9yZGY6RGVzY3JpcHRpb24+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+sHvpjAAAAYFpQ0NQc1JHQiBJRUM2MTk2Ni0yLjEAACiRdZG5S0NBEIe/REXxiqCIhUWQaBUlHkRtLBK8QC2SCF5N8nIJOR7vJYjYCrYBBdHGq9C/QFvBWhAURRBrbRVtNDznJYGImFl29tvfzgy7s2ANJJSkXu2CZCqj+SY99oXFJXvtKxaaaWeI4aCiq7P+iQAV7fNeosVue81aleP+tYZwRFfAUic8pqhaRnhKeGYto5q8I9ymxINh4TNhpyYXFL4z9VCRX0yOFfnbZC3g84K1Rdge+8WhX6zEtaSwvBxHMpFVSvcxX9IYSc37Ze2S2YmOj0k82JlmHC9u+hkV76aXAfpkR4V8VyF/jrTkKuJV1tFYJUacDE5Rs1I9ImtU9IiMBOtm///2VY8ODhSrN3qg5tkw3ruhdhvyOcP4OjKM/DFUPcFlqpyfPoSRD9FzZc1xALZNOL8qa6FduNiCjkc1qAULUpVMazQKb6fQtAitN1C/XOxZ6ZyTBwhsyFddw94+9Ei8beUH1zhoGb7OAhMAAAAJcEhZcwAACxMAAAsTAQCanBgAAAC4SURBVHic7drBCcUwDMDQ5NNZu/8G+UP48Ggr3Y2FyCXgvda614BzzmR87b1H89P9v9H0CyiAFtAUQAtoCqAFNAXQApoCaAFNAbSApgBaQHM9/T8/3f/5F1AALaApgBbQFEALaAqgBTQF0AKaAmgBTQG0gOZ6+n+++4AhBdACmgJoAU0BtICmAFpAUwAtoCmAFtAUQAtoug8YTb+AAmgBTQG0gKYAWkBTAC2gKYAW0BRAC2gKoAU0f7KKGOlRUMddAAAAAElFTkSuQmCC); + background-size: 100%, 100%, 32px; +} + +.opacity-range-input--ios::-webkit-slider-thumb, .line-size-range--ios::-webkit-slider-thumb { + appearance: none; + width: 28px; + height: 28px; + border: 0.5px solid rgba(116, 116, 128, 0.08); + border-radius: 50%; + background: #fff; + box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.03), + 0 1px 1px 0 rgba(0, 0, 0, 0.01), + 0 3px 8px 0 rgba(0, 0, 0, 0.1); +} + +.opacity-range-input--android { + appearance: none; + width: 100%; + height: 16px; + border-radius: 8px; + box-shadow: 0 0 0 0.5px #0000001F; + background: linear-gradient(90deg, #C4C4C4, var(--color)); +} + +.opacity-range-input--android::-webkit-slider-thumb { + appearance: none; + width: 20px; + height: 20px; + border-radius: 50%; + background: #fff; + box-shadow: 0 1px 3px 0 #00000033, 0 2px 2px 0 #0000001F, 0 0 2px 0 #00000024; } \ No newline at end of file