From 8118806f4ea3a5d7aa831e6b67c5a0afe6a8db02 Mon Sep 17 00:00:00 2001
From: cutls <web-pro@cutls.com>
Date: Tue, 8 Sep 2020 23:39:06 +0900
Subject: [PATCH] fix input type color css

---
 app/css/master.css                | 12 ++++++++++++
 app/view/make/setting.sample.html | 28 ++++++++++++++--------------
 2 files changed, 26 insertions(+), 14 deletions(-)

diff --git a/app/css/master.css b/app/css/master.css
index f2704c4d..1b1e9232 100644
--- a/app/css/master.css
+++ b/app/css/master.css
@@ -340,6 +340,18 @@ blockquote:before,
 	flex-wrap: wrap;
 	flex-direction: column;
 }
+input[type="color"] {
+	-webkit-appearance: none;
+	border: none;
+	width: 32px;
+	height: 32px;
+}
+input[type="color"]::-webkit-color-swatch-wrapper {
+	padding: 0;
+}
+input[type="color"]::-webkit-color-swatch {
+	border: none;
+}
 #menu {
 	position: fixed;
 	z-index: 999;
diff --git a/app/view/make/setting.sample.html b/app/view/make/setting.sample.html
index 6db34c44..55c02bdc 100644
--- a/app/view/make/setting.sample.html
+++ b/app/view/make/setting.sample.html
@@ -146,7 +146,7 @@
 							<input type="checkbox" class="filled-in" id="use-color_0" value="1" checked disabled />
 							<span>@@use@@</span>
 						</label><br />
-						<input type="color" class="btn  waves-effect" id="color-picker0_value">
+						<input type="color" id="color-picker0_value">
 					</div>
 					<div>
 						<h5>Text</h5>@@text@@<br />
@@ -154,7 +154,7 @@
 							<input type="checkbox" class="filled-in" id="use-color_1" value="1" checked disabled />
 							<span>@@use@@</span>
 						</label><br />
-						<input type="color" class="btn waves-effect" id="color-picker1_value">
+						<input type="color"  id="color-picker1_value">
 					</div>
 					<div>
 						<h5>Subcolor</h5>@@subcolor@@<br />
@@ -162,7 +162,7 @@
 							<input type="checkbox" class="filled-in" id="use-color_2" value="1" checked disabled />
 							<span>@@use@@</span>
 						</label><br />
-						<input type="color" class="btn waves-effect" id="color-picker2_value">
+						<input type="color"  id="color-picker2_value">
 					</div>
 					<div>
 						<h5>Accent</h5>@@accent@@<br />
@@ -170,7 +170,7 @@
 							<input type="checkbox" class="filled-in" id="use-color_3" value="1" checked disabled />
 							<span>@@use@@</span>
 						</label><br />
-						<input type="color" class="btn waves-effect" id="color-picker3_value">
+						<input type="color"  id="color-picker3_value">
 					</div>
 
 					<div class="advanced hide">
@@ -182,7 +182,7 @@
 						@@copyFrom@@:
 							<a class="pointer" onclick="copyColor('background','modal')">Background</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker4_value">
+						<input type="color"  id="color-picker4_value">
 					</div>
 					<div class="advanced hide">
 						<h5>Modal Footer</h5>@@modalFooter@@<br />
@@ -194,7 +194,7 @@
 							<a class="pointer" onclick="copyColor('background','modalFooter')">Background</a>/
 							<a class="pointer" onclick="copyColor('modal','modalFooter')">Modal</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker5_value">
+						<input type="color"  id="color-picker5_value">
 					</div>
 					<div class="advanced hide">
 						<h5>3rd Color</h5>@@thirdColor@@<br />
@@ -205,7 +205,7 @@
 						@@copyFrom@@:
 							<a class="pointer" onclick="copyColor('subcolor','third')">Subcolor</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker6_value">
+						<input type="color"  id="color-picker6_value">
 					</div>
 					<div class="advanced hide">
 						<h5>4th Color</h5>@@forthColor@@<br />
@@ -217,7 +217,7 @@
 							<a class="pointer" onclick="copyColor('subcolor','forth')">Subcolor</a>/
 							<a class="pointer" onclick="copyColor('third','forth')">3rd Color</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker7_value">
+						<input type="color"  id="color-picker7_value">
 					</div>
 					<div class="advanced hide">
 						<h5>Bottom</h5>@@bottom@@<br />
@@ -228,7 +228,7 @@
 						@@copyFrom@@:
 							<a class="pointer" onclick="copyColor('subcolor','bottom')">Subcolor</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker8_value">
+						<input type="color"  id="color-picker8_value">
 					</div>
 					<div class="advanced hide">
 						<h5>2nd Accent</h5>@@emphasized@@<br />
@@ -239,7 +239,7 @@
 						@@copyFrom@@:
 							<a class="pointer" onclick="copyColor('accent','emphasized')">Accent</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker9_value">
+						<input type="color"  id="color-picker9_value">
 					</div>
 					<div class="advanced hide">
 						<h5>Postbox</h5>@@postbox@@<br />
@@ -250,7 +250,7 @@
 						@@copyFrom@@:
 							<a class="pointer" onclick="copyColor('subcolor','postbox')">Subcolor</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker10_value">
+						<input type="color"  id="color-picker10_value">
 					</div>
 					<div class="advanced hide">
 						<h5>Active</h5>@@active@@<br />
@@ -261,7 +261,7 @@
 						@@copyFrom@@:
 							<a class="pointer" onclick="copyColor('accent','active')">Accent</a>
 						<br />
-						<input type="color" class="btn waves-effect" id="color-picker11_value">
+						<input type="color"  id="color-picker11_value">
 					</div>
 					<div class="advanced hide">
 						<h5>Selected</h5>@@selected@@<br />
@@ -269,7 +269,7 @@
 							<input type="checkbox" class="filled-in" id="use-color_12" value="1" />
 							<span>@@use@@</span>
 						</label><br />
-						<input type="color" class="btn waves-effect" id="color-picker12_value">
+						<input type="color"  id="color-picker12_value">
 					</div>
 					<div class="advanced hide">
 						<h5>Selected with shared</h5>@@selectedWithShare@@<br />
@@ -277,7 +277,7 @@
 							<input type="checkbox" class="filled-in" id="use-color_13" value="1" />
 							<span>@@use@@</span>
 						</label><br />
-						<input type="color" class="btn waves-effect" id="color-picker13_value">
+						<input type="color"  id="color-picker13_value">
 					</div>
 				</div><br /><br />
 				<button class="btn-large waves-effect" onclick="customComp()">@@change@@</button>&nbsp;<button