200 lines
7.7 KiB
Plaintext
200 lines
7.7 KiB
Plaintext
.draw-sheet {
|
|
background-color: @background-primary;
|
|
|
|
.device-android & {
|
|
box-shadow: 0 3.75px 11px 0 #00000030, 0 0.5px 5px 0 #0000000A;
|
|
--f7-sheet-border-radius: 16px;
|
|
}
|
|
|
|
.device-ios & {
|
|
box-shadow: 0 8px 28px 0 #00000029;
|
|
--f7-sheet-border-radius: 10px;
|
|
}
|
|
|
|
.swipe-container {
|
|
height: 20px;
|
|
}
|
|
|
|
&-label {
|
|
padding-inline: 16px;
|
|
height: 48px;
|
|
display: flex;
|
|
color: @text-normal;
|
|
|
|
.device-android & {
|
|
font-size: 16px;
|
|
align-items: center;
|
|
}
|
|
|
|
.device-ios & {
|
|
align-items: flex-end;
|
|
text-transform: uppercase;
|
|
font-size: 13px;
|
|
line-height: 18px;
|
|
|
|
span {
|
|
padding-bottom: 4px;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-item {
|
|
padding-inline: 16px;
|
|
height: 48px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
}
|
|
|
|
.draw-sheet--settings {
|
|
&-colors {
|
|
padding: 8px 16px;
|
|
|
|
&-list {
|
|
width: 100%;
|
|
display: grid;
|
|
grid-template-columns: repeat(10, 1fr);
|
|
gap: 2px;
|
|
|
|
&-item {
|
|
border: 1px solid;
|
|
aspect-ratio: 1;
|
|
border-color: @background-menu-divider;
|
|
}
|
|
|
|
&-add {
|
|
position: relative;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
aspect-ratio: 1;
|
|
border: 2px solid @background-primary;
|
|
|
|
i {
|
|
background-color: @brandColor;
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
inset: -5px;
|
|
background: linear-gradient(to right, #FF0000, #FF8A00, #FAFF01, #00FF1A, #00F0FF, #0029FF, #DB00FF);
|
|
z-index: -1;
|
|
border-radius: 4px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
#drawbar.navbar {
|
|
--height: calc(44px + var(--f7-safe-area-bottom));
|
|
height: var(--height);
|
|
--f7-navbar-border-color: @draw-toolbar-border;
|
|
--f7-navbar-bg-color: @draw-toolbar-background;
|
|
|
|
.device-android & {
|
|
body.theme-type-light & {
|
|
--f7-navbar-bg-color: #fff;
|
|
}
|
|
top: unset;
|
|
bottom: env(keyboard-inset-top, 0px);
|
|
}
|
|
|
|
.device-ios & {
|
|
top: 100vh;
|
|
margin-top: calc(-1 * (var(--height) + env(keyboard-inset-top, 0px)));
|
|
}
|
|
|
|
.draw-toolbar {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding-inline: 10px;
|
|
width: 100%;
|
|
|
|
@media (min-width: 550px) {
|
|
display: grid;
|
|
grid-template-columns: repeat(8, 1fr);
|
|
}
|
|
|
|
&-item {
|
|
@media (min-width: 550px) {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
button {
|
|
display: flex;
|
|
padding: 0;
|
|
width: 36px;
|
|
height: 36px;
|
|
min-width: 36px;
|
|
border-radius: 7px;
|
|
border: none;
|
|
|
|
&.button-fill {
|
|
color: @brandColor;
|
|
background-color: @button-active-opacity;
|
|
}
|
|
}
|
|
}
|
|
|
|
&-divider {
|
|
width: 1px;
|
|
height: 24px;
|
|
background-color: @background-menu-divider;
|
|
}
|
|
}
|
|
}
|
|
|
|
.line-size-range--ios {
|
|
appearance: none;
|
|
width: 100%;
|
|
height: 24px;
|
|
background: url(data:image/svg+xml;base64,PHN2ZyBwcmVzZXJ2ZUFzcGVjdFJhdGlvPSJub25lIiB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDM0MyAyNCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTAgMTJDMCAxMC44ODYxIDAuODg1NzUgOS45NzQxOCAxLjk5OTE1IDkuOTQxNzJMMzMxLjAwNSAwLjM0OTcwNkMzMzcuNTcyIDAuMTU4MjQgMzQzIDUuNDI5OTIgMzQzIDEyQzM0MyAxOC41NzAxIDMzNy41NzIgMjMuODQxOCAzMzEuMDA1IDIzLjY1MDNMMS45OTkxNSAxNC4wNTgzQzAuODg1NzU0IDE0LjAyNTggMCAxMy4xMTM5IDAgMTJaIiBmaWxsPSIjQUVBRUIyIi8+Cjwvc3ZnPgo=);
|
|
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;
|
|
} |