[feature] add more theme accent presets

zombieFox · May 1, 2020 · 54dd036 · 54dd036
1 parent 02ecd77
commit 54dd036
Show file tree

Hide file tree

Showing 7 changed files with 669 additions and 140 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "nightTab",
-  "version": "5.29.0",
+  "version": "5.30.0",
   "description": "A neutral new tab page accented with a chosen colour. Customise the layout, style, background and bookmarks in nightTab.",
   "main": "index.js",
   "scripts": {

diff --git a/src/css/theme.css b/src/css/theme.css
@@ -337,11 +337,11 @@
   background-color: rgb(var(--theme-color-20));
 }
 
-.theme-accent-preset-grid {
+.theme-accent-preset {
   display: grid;
-  grid-gap: var(--form-wrap-space);
-  grid-template-columns: repeat(7, 1fr);
-  grid-template-rows: repeat(5, 1fr);
+  grid-gap: calc(var(--form-wrap-space) / 2);
+  grid-template-rows: repeat(7, auto);
+  grid-auto-flow: column;
   justify-items: center;
 }
 
@@ -350,8 +350,20 @@
   padding: 0;
   width: 1.5em;
   height: 1.5em;
-  min-width: 1.5em;
-  min-height: 1.5em;
+  min-width: initial;
+  min-height: initial;
+}
+
+.theme-accent-preset-type-grey {
+  display: block;
+}
+
+.theme-accent-preset-type-primary {
+  display: block;
+}
+
+.theme-accent-preset-type-secondary {
+  display: none;
 }
 
 .theme-accent-preset-item:focus,
@@ -360,20 +372,46 @@
   background-color: hsl(var(--theme-accent-preset-item-color-h), calc(var(--theme-accent-preset-item-color-s) * 1%), calc(var(--theme-accent-preset-item-color-l) * 1%));
 }
 
+@media (min-width: 550px) {
+  .theme-accent-preset-item {
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  .theme-accent-preset-type-secondary {
+    display: block;
+  }
+}
+
 @media (min-width: 700px) {
   .theme-accent-preset-item {
-    width: 2em;
-    height: 2em;
-    min-width: 2em;
-    min-height: 2em;
+    width: 1.5em;
+    height: 1.5em;
+  }
+
+  .theme-accent-preset-type-secondary {
+    display: none;
   }
 }
 
 @media (min-width: 900px) {
   .theme-accent-preset-item {
-    width: 2.5em;
-    height: 2.5em;
-    min-width: 2.5em;
-    min-height: 2.5em;
+    width: 1.25em;
+    height: 1.25em;
+  }
+
+  .theme-accent-preset-type-secondary {
+    display: block;
+  }
+}
+
+@media (min-width: 1100px) {
+  .theme-accent-preset-item {
+    width: 1.5em;
+    height: 1.5em;
+  }
+
+  .theme-accent-preset-type-secondary {
+    display: block;
   }
 }
diff --git a/src/html/menu/content/theme.html b/src/html/menu/content/theme.html
@@ -5,7 +5,7 @@
   @@include("./theme/saved.html")
 
   @@include("./theme/fonts.html")
-  
+
   @@include("./theme/style.html")
 
   @@include("./theme/color.html")