🔳 Checkbox style

cqb13 · Feb 17, 2023 · dceb405 · dceb405
1 parent c65188c
commit dceb405
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 5 deletions.
diff --git a/layout/popup.html b/layout/popup.html
@@ -40,10 +40,10 @@ <h1>Custom Chrome Tab</h1>
         <p>Background Color</p>
         <input type="color" id="background-color-block" value="#6992c9" class="picker-color">
       </section>
-      <label>
-        <input type="checkbox" id="gradient-switch">
-        Gradient
-      </label>
+      <div class='CheckBox'>
+        <input type='checkbox' id="gradient-switch"/>
+        <label>Gradient</label>
+      </div>
       <section id="gradient" class="hidden">
         <p>Background Color 1</p>
         <input type="color" id="gradient1" value="#f9f9f9" class="picker-color">

diff --git a/styles/popup.css b/styles/popup.css
@@ -10,7 +10,7 @@ body {
 }
 
 h1 {
-  font-size: 30px;
+  font-size: 1.5rem;
   margin-bottom: 10px;
   margin-top: 5px;
 }
@@ -122,6 +122,38 @@ main {
   gap: 10px;
 }
 
+.CheckBox {
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  width: fit-content;
+  margin: 5px auto 5px auto;
+}
+
+input[type="checkbox"] {
+  cursor: pointer;
+  -webkit-appearance: none;
+  width: 25px;
+  height: 25px;
+  margin: auto;
+  transition: 0.25s;
+  border: 2px solid #496bbe;
+  border-radius: 5px;
+}
+
+input[type="checkbox"]:checked {
+  background: #496bbe;
+  scale: 1.1;
+}
+
+
+.CheckBox label {
+  margin-left: 5px;
+  font-size: 1.4rem;
+}
+
 .button {
   width: 80%;
   margin: 0 auto;