diff --git a/VERSION b/VERSION index 01efe76..d6c9550 100644 --- a/VERSION +++ b/VERSION @@ -1 +1 @@ -0.4.67-beta +0.4.68-beta diff --git a/public/css/coloring.css b/public/css/coloring.css index 8ad385b..82efc26 100644 --- a/public/css/coloring.css +++ b/public/css/coloring.css @@ -23,14 +23,17 @@ .coloring-art svg{width:100%;height:100%;display:block;background:#fff} .coloring-art [hidden]{display:none} .coloring-svg-lines{shape-rendering:geometricPrecision} -.coloring-svg-lines .coloring-region[data-level="2"]{stroke-width:6} -.coloring-svg-lines .coloring-region[data-level="3"]{stroke-width:5.5} -.coloring-svg-lines .coloring-detail{stroke-width:3.75;pointer-events:none} -.coloring-svg-lines .coloring-detail[data-level="3"]{stroke-width:3.25} +.coloring-svg-lines .coloring-region{paint-order:fill stroke;stroke-opacity:.98} +.coloring-svg-lines .coloring-region[data-role="backdrop"]{stroke-width:4.25} +.coloring-svg-lines .coloring-region[data-level="2"]{stroke-width:5.9} +.coloring-svg-lines .coloring-region[data-level="3"]{stroke-width:5.15} +.coloring-svg-lines .coloring-detail{stroke:#41516a;stroke-width:3.6;stroke-opacity:.9;pointer-events:none} +.coloring-svg-lines .coloring-detail[data-level="3"]{stroke:#526079;stroke-width:3;stroke-opacity:.82} .coloring-svg-lines .coloring-recognition{pointer-events:none} .coloring-paper canvas{z-index:2;touch-action:none;cursor:crosshair;mix-blend-mode:multiply} .coloring-app[data-tool="bucket"] .coloring-art{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30'%3E%3Ctext y='24' font-size='23'%3E%F0%9F%AA%A3%3C/text%3E%3C/svg%3E") 6 24,pointer} .coloring-app[data-tool="bucket"] .coloring-art [data-fillable]{pointer-events:all} +.coloring-app[data-tool="bucket"] .coloring-art [data-fillable]:hover{stroke:#d56a1f;stroke-opacity:1} .coloring-hint{min-height:30px;padding:7px 11px;color:var(--muted);font-size:11px;font-weight:700;text-align:center;background:var(--surface)} .widget[data-widget="coloring"]{--widget-accent:var(--orange)} diff --git a/public/js/core.js b/public/js/core.js index 2bd426f..a6a1fe9 100644 --- a/public/js/core.js +++ b/public/js/core.js @@ -2,7 +2,7 @@ "use strict"; /* version — shown until /api/version resolves (or if the fetch fails, e.g. offline). Kept in sync by hand with the VERSION file at the repo root on every release. */ -const VERSION = "0.4.67-beta"; +const VERSION = "0.4.68-beta"; /* Safari en oudere mobiele browsers behandelen 100vh/100% soms als de hoogte achter hun adres- en navigatiebalk. visualViewport geeft de werkelijk zichtbare hoogte; de CSS gebruikt deze pixelwaarde als betrouwbare bron en diff --git a/public/js/widgets/coloring.js b/public/js/widgets/coloring.js index ee35bf1..e6f948a 100644 --- a/public/js/widgets/coloring.js +++ b/public/js/widgets/coloring.js @@ -11,14 +11,15 @@ const COLORING_COLORS=Object.freeze([ ]); function coloringPart(tag,id,attrs="",level=1){ - return `<${tag} class="coloring-region" data-fillable="true" data-part="${id}"${level>1?` data-level="${level}"`:""} ${attrs}/>`; + const backdrop=tag==="rect"&&attrs==='x="4" y="4" width="792" height="592" rx="28"'; + return `<${tag} class="coloring-region" data-fillable="true" data-part="${id}"${backdrop?' data-role="backdrop"':""}${level>1?` data-level="${level}"`:""} ${attrs}/>`; } function coloringLine(tag,attrs="",level=1){ return `<${tag} class="coloring-detail"${level>1?` data-level="${level}"`:""} ${attrs}/>`; } function coloringScene(content){ - return `