<snapdata remixID="14849810"><project name="Better Flat Design" app="Snap! 11.0.8, https://snap.berkeley.edu" version="2"><notes></notes><thumbnail>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAB4CAYAAAB1ovlvAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAoKADAAQAAAABAAAAeAAAAAAeaS0RAAADJklEQVR4Ae3XvUllARSF0fuGMbYFq7EGwcTANqzHSmzGVNDQccwMHNiwZSuzXub1cM5z+eHP6fXtdXgRGAn8Gt11lsC7gACFMBUQ4JTfcQFqYCogwCm/4wLUwFRAgFN+xwWogamAAKf8jgtQA1MBAU75HRegBqYCApzyOy5ADUwFBDjld1yAGpgKCHDK77gANTAVEOCU33EBamAqIMApv+MC1MBUQIBTfscFqIGpgACn/I4LUANTAQFO+R0XoAamAgKc8jsuQA1MBQQ45XdcgBqYCghwyu+4ADUwFRDglN9xAWpgKiDAKb/jAtTAVECAU37HBaiBqYAAp/yOC1ADUwEBTvkdF6AGpgICnPI7LkANTAUEOOV3XIAamAoIcMrvuAA1MBUQ4JTfcQFqYCogwCm/4wLUwFRAgFN+xwWoganA7+n1b3z8/v7+eHp6Oi4vL4+Li4tv/E5/9ls7vb69fvaX8DXv/vn5+bi9vT1eXl6Ox8fH4/r6+jidTu/Pzs7Ovubof7hVgP/4pj88PBx3d3fH+fn5h6m/Ud7c3Lw/u7q6+vA5H2QC/gbMvEyXBfwE/ATUr+BPYMqPBfgJqH9CPoEpPxZgGdS6TMDfgJmX6bKAAMug1mUCAsy8TJcFBFgGtS4TEGDmZbosIMAyqHWZgAAzL9NlAQGWQa3LBASYeZkuCwiwDGpdJiDAzMt0WUCAZVDrMgEBZl6mywICLINalwkIMPMyXRYQYBnUukxAgJmX6bKAAMug1mUCAsy8TJcFBFgGtS4TEGDmZbosIMAyqHWZgAAzL9NlAQGWQa3LBASYeZkuCwiwDGpdJiDAzMt0WUCAZVDrMgEBZl6mywICLINalwkIMPMyXRYQYBnUukxAgJmX6bKAAMug1mUCAsy8TJcFBFgGtS4TEGDmZbosIMAyqHWZgAAzL9NlAQGWQa3LBASYeZkuCwiwDGpdJiDAzMt0WUCAZVDrMgEBZl6mywICLINalwkIMPMyXRYQYBnUukxAgJmX6bKAAMug1mUCAsy8TJcFBFgGtS4TEGDmZbosIMAyqHWZgAAzL9NlAQGWQa3LBP4AtIpF1RL41EAAAAAASUVORK5CYII=</thumbnail><scenes select="1"><scene name="Better Flat Design"><notes></notes><hidden></hidden><headers></headers><code></code><blocks><block-definition s="better flat design" type="command" category="looks"><header></header><code></code><translations></translations><inputs></inputs><script><block s="doRun"><block s="reportJSFunction"><list></list><l>var oldCreateItems = MenuMorph.prototype.createItems;&#xD;MenuMorph.prototype.createItems = function() {&#xD;    oldCreateItems.call(this)&#xD;    if (!this.isListContents) {&#xD;    this.edge = 5;&#xD;  }&#xD;}&#xD;PushButtonMorph.prototype.drawBackground = function (ctx, color) {&#xD;&#xD;  ctx.fillStyle = color.toString();&#xD;  ctx.beginPath();&#xD;  this.outlinePath(&#xD;    ctx,&#xD;    Math.max(this.corner - this.outline, 0),&#xD;    this.outline&#xD;  );&#xD;  ctx.closePath();&#xD;  ctx.fill();&#xD;  ctx.lineWidth = this.outline;&#xD;};&#xD;PushButtonMorph.prototype.drawOutline = function (ctx) {&#xD;  var outlineStyle,&#xD;    isFlat = MorphicPreferences.isFlat &amp;&amp; !this.is3D;&#xD;&#xD;  if (!this.outline) {&#xD;   return null&#xD;  }&#xD;  if (this.outlineGradient &amp;&amp; !(!this.outline || isFlat)) {&#xD;    outlineStyle = ctx.createLinearGradient(0, 0, 0, this.height());&#xD;    outlineStyle.addColorStop(0, this.outlineColor.darker().toString());&#xD;    outlineStyle.addColorStop(1, "white");&#xD;  } else {&#xD;    outlineStyle = isFlat ? this.outlineColor.lighter().toString() : this.outlineColor.toString();&#xD;  }&#xD;  ctx.fillStyle = outlineStyle;&#xD;  ctx.beginPath();&#xD;  this.outlinePath(ctx, this.corner, 0);&#xD;  ctx.closePath();&#xD;  ctx.fill();&#xD;};&#xD;DialogBoxMorph.prototype.render = function (ctx) {&#xD;  var gradient,&#xD;    w = this.width(),&#xD;    h = this.height(),&#xD;    th = Math.floor(fontHeight(this.titleFontSize) + this.titlePadding * 2),&#xD;    shift = this.corner / 2,&#xD;    x,&#xD;    y,&#xD;    isFlat = MorphicPreferences.isFlat &amp;&amp; !this.is3D;&#xD;&#xD;  // this.alpha = isFlat ? 0.9 : 1;&#xD;&#xD;  // title bar&#xD;  if (isFlat) {&#xD;    ctx.fillStyle = this.titleBarColor.toString();&#xD;  } else {&#xD;    gradient = ctx.createLinearGradient(0, 0, 0, th);&#xD;    gradient.addColorStop(&#xD;      0,&#xD;      this.titleBarColor.lighter(this.contrast / 2).toString()&#xD;    );&#xD;    gradient.addColorStop(&#xD;      1,&#xD;      this.titleBarColor.darker(this.contrast).toString()&#xD;    );&#xD;    ctx.fillStyle = gradient;&#xD;  }&#xD;  ctx.beginPath();&#xD;  this.outlinePathTitle(ctx, this.corner);//isFlat ? 0 : this.corner);&#xD;  ctx.closePath();&#xD;  ctx.fill();&#xD;&#xD;  // flat shape&#xD;  // body&#xD;  ctx.fillStyle = this.color.toString();&#xD;  ctx.beginPath();&#xD;  this.outlinePathBody(ctx, this.corner)//isFlat ? 0 : this.corner);&#xD;  ctx.closePath();&#xD;  ctx.fill();&#xD;&#xD;  if (isFlat) {&#xD;    return;&#xD;  }&#xD;&#xD;  // 3D-effect&#xD;  // bottom left corner&#xD;  gradient = ctx.createLinearGradient(0, h - this.corner, 0, h);&#xD;  gradient.addColorStop(0, this.color.toString());&#xD;  gradient.addColorStop(1, this.color.darker(this.contrast.toString()));&#xD;&#xD;  ctx.lineWidth = this.corner;&#xD;  ctx.lineCap = "round";&#xD;  ctx.strokeStyle = gradient;&#xD;&#xD;  ctx.beginPath();&#xD;  ctx.moveTo(this.corner, h - shift);&#xD;  ctx.lineTo(this.corner + 1, h - shift);&#xD;  ctx.stroke();&#xD;&#xD;  // bottom edge&#xD;  gradient = ctx.createLinearGradient(0, h - this.corner, 0, h);&#xD;  gradient.addColorStop(0, this.color.toString());&#xD;  gradient.addColorStop(1, this.color.darker(this.contrast.toString()));&#xD;&#xD;  ctx.lineWidth = this.corner;&#xD;  ctx.lineCap = "butt";&#xD;  ctx.strokeStyle = gradient;&#xD;&#xD;  ctx.beginPath();&#xD;  ctx.moveTo(this.corner, h - shift);&#xD;  ctx.lineTo(w - this.corner, h - shift);&#xD;  ctx.stroke();&#xD;&#xD;  // right body edge&#xD;  gradient = ctx.createLinearGradient(w - this.corner, 0, w, 0);&#xD;  gradient.addColorStop(0, this.color.toString());&#xD;  gradient.addColorStop(1, this.color.darker(this.contrast).toString());&#xD;&#xD;  ctx.lineWidth = this.corner;&#xD;  ctx.lineCap = "butt";&#xD;  ctx.strokeStyle = gradient;&#xD;&#xD;  ctx.beginPath();&#xD;  ctx.moveTo(w - shift, th);&#xD;  ctx.lineTo(w - shift, h - this.corner);&#xD;  ctx.stroke();&#xD;&#xD;  // bottom right corner&#xD;  x = w - this.corner;&#xD;  y = h - this.corner;&#xD;&#xD;  gradient = ctx.createRadialGradient(x, y, 0, x, y, this.corner);&#xD;  gradient.addColorStop(0, this.color.toString());&#xD;  gradient.addColorStop(1, this.color.darker(this.contrast.toString()));&#xD;&#xD;  ctx.lineCap = "butt";&#xD;&#xD;  ctx.strokeStyle = gradient;&#xD;&#xD;  ctx.beginPath();&#xD;  ctx.arc(x, y, shift, radians(90), radians(0), true);&#xD;  ctx.stroke();&#xD;&#xD;  // left body edge&#xD;  gradient = ctx.createLinearGradient(0, 0, this.corner, 0);&#xD;  gradient.addColorStop(0, this.color.lighter(this.contrast).toString());&#xD;  gradient.addColorStop(1, this.color.toString());&#xD;&#xD;  ctx.lineCap = "butt";&#xD;  ctx.strokeStyle = gradient;&#xD;&#xD;  ctx.beginPath();&#xD;  ctx.moveTo(shift, th);&#xD;  ctx.lineTo(shift, h - this.corner * 2);&#xD;  ctx.stroke();&#xD;&#xD;  // left vertical bottom corner&#xD;  gradient = ctx.createLinearGradient(0, 0, this.corner, 0);&#xD;  gradient.addColorStop(0, this.color.lighter(this.contrast).toString());&#xD;  gradient.addColorStop(1, this.color.toString());&#xD;&#xD;  ctx.lineCap = "round";&#xD;  ctx.strokeStyle = gradient;&#xD;&#xD;  ctx.beginPath();&#xD;  ctx.moveTo(shift, h - this.corner * 2);&#xD;  ctx.lineTo(shift, h - this.corner - shift);&#xD;  ctx.stroke();&#xD;};&#xD;InputFieldMorph.prototype.render = function (ctx) {&#xD;  var borderColor;&#xD;&#xD;  if (this.parent) {&#xD;    if (this.parent.color.eq(WHITE)) {&#xD;      this.color = this.parent.color.darker(this.contrast * 0.1);&#xD;    } else {&#xD;      this.color = this.parent.color.lighter(this.contrast * 0.75);&#xD;    }&#xD;    borderColor = this.parent.color;&#xD;  } else {&#xD;    borderColor = new Color(120, 120, 120);&#xD;  }&#xD;  ctx.fillStyle = this.color.toString();&#xD;  ctx.strokeStyle = this.color.darker(this.contrast/2).toString();&#xD;  ctx.strokeWidth = 2&#xD;&#xD;  // cache my border colors&#xD;  this.cachedClr = borderColor.toString();&#xD;  this.cachedClrBright = borderColor.lighter(this.contrast).toString();&#xD;  this.cachedClrDark = borderColor.darker(this.contrast).toString();&#xD;&#xD;  if(false) {&#xD;  ctx.fillRect(&#xD;    this.edge,&#xD;    this.edge,&#xD;    this.width() - this.edge * 2,&#xD;    this.height() - this.edge * 2&#xD;  );&#xD;} else {&#xD;  ctx.beginPath()&#xD; ctx.roundRect(&#xD;        this.edge,&#xD;        this.edge,&#xD;        this.width() - (this.edge * 2),&#xD;        this.height() - (this.edge * 2),&#xD;        3&#xD;    );&#xD;    ctx.fill()&#xD;    ctx.stroke()&#xD;}&#xD;&#xD;  this.drawRectBorder(ctx);&#xD;};</l></block><list></list></block></script></block-definition></blocks><primitives></primitives><stage name="Stage" width="480" height="360" costume="0" color="255,255,255,1" tempo="60" threadsafe="false" penlog="false" volume="100" pan="0" lines="round" ternary="false" hyperops="true" codify="false" inheritance="true" sublistIDs="false" id="16"><pentrails>data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAeAAAAFoCAYAAACPNyggAAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAB4KADAAQAAAABAAABaAAAAAAHwbojAAAL30lEQVR4Ae3QMQEAAADCoPVPbQwfiEBhwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGDBgwIABAwYMGPgMDI3+AAEeFvcCAAAAAElFTkSuQmCC</pentrails><costumes><list struct="atomic" id="17"></list></costumes><sounds><list struct="atomic" id="18"></list></sounds><variables></variables><blocks></blocks><scripts></scripts><sprites select="1"><sprite name="Sprite" idx="1" x="0" y="2.8421709430404007e-13" heading="90" scale="1" volume="100" pan="0" rotation="1" draggable="true" costume="0" color="80,80,80,1" pen="tip" id="23"><costumes><list struct="atomic" id="24"></list></costumes><sounds><list struct="atomic" id="25"></list></sounds><blocks></blocks><variables></variables><scripts><script x="50.810825892857146" y="89.70588235294109"><custom-block s="better flat design"></custom-block></script></scripts></sprite></sprites></stage><variables></variables></scene></scenes></project><media name="Better Flat Design" app="Snap! 11.0.8, https://snap.berkeley.edu" version="2"></media></snapdata>