color widget

3 files changed, 92 insertions, 9 deletions

diff --git a/index.html b/index.html
index c73282b..9a2fd05 100644
--- a/index.html
+++ b/index.html
@@ -27,8 +27,11 @@
         <div class="widget button toggle">Lamp 1</div>
         <div class="widget slider" style="--fill-percent: 0.3;"></div>
         <div class="widget button checkbox"></div>
+        <div class="widget color-wheel" style="--pos-x: 0.3; --pos-y: 0.3;"></div>
+        <div class="widget color-temp" style="--pos: 0.3;"></div>
+        <div class="widget color-light" style="--pos: 0.3;"></div>
     </content>
 
     <script type="module" src="scripts/main.js"></script>
 </body>
-</html>
\ No newline at end of file
+</html>
diff --git a/styles/main.css b/styles/main.css
index 0472fab..c9f0728 100644
--- a/styles/main.css
+++ b/styles/main.css
@@ -19,7 +19,7 @@ user {
     position: fixed;
     right: 30px;
     top: 10px;
-    z-index: 1;
+    z-index: 2;
 }
 
 user img {
@@ -37,7 +37,7 @@ nav {
     width:calc(100% - 20px);
     height:50px;
     background-color: gray;
-    z-index: 0;
+    z-index: 1;
     border-radius: 10px;
     box-sizing: border-box;
 }
@@ -60,4 +60,4 @@ content {
     margin-left: 50px;
     margin-right: 50px;
     margin-bottom:50px;
-}
\ No newline at end of file
+}
diff --git a/styles/widgets.css b/styles/widgets.css
index 76a1475..a19220d 100644
--- a/styles/widgets.css
+++ b/styles/widgets.css
@@ -19,6 +19,7 @@
     min-height: var(--base-unit);
 
     cursor:pointer;
+	position: relative;
 }
 
 .widget:hover {
@@ -81,7 +82,6 @@
     --side-color: #444;
     width: var(--base-unit);
     height: calc(3 * var(--base-unit));
-    position: relative;
 }
 
 .slider.h {
@@ -91,7 +91,7 @@
 
 .slider::before {
     border-radius: 10px;
-    position:absolute;
+    position: absolute;
     bottom: 0;
     left: 0;
     height: calc(100% * var(--fill-percent));
@@ -117,7 +117,7 @@
 }
 
 .slider::after {
-    position:absolute;
+    position: absolute;
     top: 10px;
     left: calc(50% - 2px);
     height: calc(100% - 20px);
@@ -146,7 +146,6 @@
     --top-color-hover: rgba(0, 0, 0, 0);
     --top-color-active: rgba(0, 0, 0, 0);
     --side-color: #444;
-    position: relative;
 
     border: 7px solid #888;
     box-shadow: 5px 5px inset var(--side-color), 1px 1px var(--side-color), 3px 3px var(--side-color), 5px 5px var(--side-color);
@@ -199,4 +198,85 @@
 
 /**
     Color widget
-*/
\ No newline at end of file
+*/
+
+.color-wheel {
+	background: radial-gradient(rgba(255, 255, 255, 1), rgba(255, 255, 255, 0)), conic-gradient(#f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
+	border-radius: 50%;
+    width: calc(3 * var(--base-unit));
+    height: calc(3 * var(--base-unit));
+    --side-color: #aaa;
+	overflow: unset;
+}
+
+.color-wheel::after {
+	content: '';
+	height: 18px;
+	width: 18px;
+	border: 5px solid #444;
+	position: absolute;
+	bottom: calc((50% - 9px) + (50%) * var(--pos-y));
+	left: calc((50% - 9px) + (50%) * var(--pos-x));
+
+	border-radius: 50%;
+	transition-duration: 0.15s;
+	box-sizing: border-box;
+}
+
+.color-wheel:hover::after {
+	border-color: #888;
+}
+
+.color-temp {
+    width: var(--base-unit);
+    height: calc(3 * var(--base-unit));
+	background: linear-gradient(rgb(190, 200, 255), white 30%, rgb(255, 190, 150));
+    --side-color: #aaa;
+	overflow: unset;
+}
+
+.color-temp::after {
+	content: '';
+	width: calc(100% + 8px);
+	height: 14px;
+	border: 5px solid #444;
+	position: absolute;
+	bottom: calc(-7px + (100% + 14px) * var(--pos));
+	left: -4px;
+
+	box-sizing: border-box;
+
+	border-radius: 7px;
+	transition-duration: 0.15s;
+}
+
+.color-temp:hover::after {
+	border-color: #888;
+}
+
+.color-light {
+    height: var(--base-unit);
+    width: calc(3 * var(--base-unit));
+	background: linear-gradient(to left, white, black);
+    --side-color: #aaa;
+	overflow: unset;
+}
+
+.color-light::after {
+	content: '';
+	height: calc(100% + 8px);
+	width: 14px;
+	border: 5px solid #444;
+	position: absolute;
+	left: calc(-7px + (100% + 14px) * var(--pos));
+	top: -4px;
+
+	box-sizing: border-box;
+
+	border-radius: 7px;
+	transition-duration: 0.15s;
+}
+
+.color-light:hover::after {
+	border-color: #888;
+}