Merge pull request #291 from unisonweb/style-catalog-hero-and-input-focus

Add style and background image to Catalog hero

Author: hojberg

src/css/app.css

@@ -30,6 +30,8 @@
   font-size: var(--font-size-medium);
   z-index: var(--layer-popover);
 
+  box-shadow: 0 -1px 0 var(--color-sidebar-border);
+
   --color-main-fg: var(--color-sidebar-fg);
   --color-main-subtle-fg: var(--color-sidebar-subtle-fg);
 

src/css/main.css

@@ -8,6 +8,7 @@
   --border-radius-base: 0.25rem;
 
   /* -- Layers ------------------------------------------------------------- */
+  --layer-beneath: 0;
   --layer-base: 1;
   --layer-popover: 50;
   --layer-tooltip: 75;

src/css/themes/unison/colors.css

@@ -10,6 +10,7 @@
    */
   --color-transparent: rgba(255, 255, 255, 0);
   --color-gray-darken-20-transparent: rgba(45, 46, 53, 0);
+  --color-gray-darken-10-transparent: rgba(65, 66, 75, 0);
 
   /* Brand colors */
   --color-brand-bright-red: #ff4756;
@@ -52,6 +53,7 @@
   --color-blue-3: #9ec5ff;
   --color-blue-4: #cbe0ff;
   --color-blue-5: #ecf2fa;
+  --color-blue-2-25-pct: rgba(85, 149, 255, 0.25);
 
   /* Oranges */
   --color-orange-1: #ff8800;

src/css/themes/unison/light.css

@@ -12,6 +12,7 @@
   --color-main-subtle-border: var(--color-gray-lighten-50);
   --color-main-divider: var(--color-gray-lighten-55);
   --color-main-focus-fg: var(--color-blue-2);
+  --color-main-focus-outline: var(--color-blue-2-25-pct);
   --color-main-focus-bg: var(--color-blue-2);
   --color-main-alert: var(--color-pink-1);
   --color-main-mark-fg: var(--color-blue-2);
@@ -23,7 +24,7 @@
   --color-app-header-subtle-fg-em: var(--color-gray-lighten-50);
   --color-app-header-context-unison-share-fg: var(--color-purple-4);
   --color-app-header-context-unison-local-fg: var(--color-pink-3);
-  --color-app-header-border: var(--color-gray-base);
+  --color-app-header-border: transparent;
 
   --color-keyboard-shortcut-key-fg: var(--color-gray-base);
   --color-keyboard-shortcut-key-bg: var(--color-gray-lighten-50);
@@ -35,7 +36,7 @@
   --color-sidebar-bg: var(--color-gray-darken-20);
   /* see color files for why this is needed */
   --color-sidebar-bg-transparent: var(--color-gray-darken-20-transparent);
-  --color-sidebar-border: var(--color-transparent);
+  --color-sidebar-border: var(--color-gray-base);
   --color-sidebar-subtle-fg: var(--color-gray-lighten-20);
   --color-sidebar-subtle-fg-em: var(--color-gray-lighten-30);
   --color-sidebar-subtle-bg: var(--color-transparent);

src/css/unison-share/page/catalog.css

@@ -1,19 +1,57 @@
+.catalog-hero {
+  --color-catalog-hero-bg: var(--color-gray-darken-10);
+  --color-catalog-hero-bg-transparent: var(--color-gray-darken-10-transparent);
+  --color-catalog-hero-explore: var(--color-green-4);
+  --color-catalog-hero-discover: var(--color-blue-4);
+  --color-catalog-hero-share: var(--color-purple-4);
+
+  display: flex;
+  flex: 1;
+  height: 100%;
+  background-image: linear-gradient(
+      to bottom,
+      var(--color-catalog-hero-bg),
+      var(--color-catalog-hero-bg-transparent)
+    ),
+    url("../../../img/circle-grid-color.svg");
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+  justify-content: center;
+  align-items: center;
+}
+
+.catalog-hero:after {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  content: " ";
+  background: var(--color-catalog-hero-bg);
+  opacity: 0.9;
+  z-index: var(--layer-beneath);
+}
+
 .catalog-hero h1 {
+  position: relative;
+  z-index: var(--layer-base);
   font-size: 2.375rem;
   font-weight: normal;
   text-align: center;
+  margin-bottom: 1.375rem;
 }
 
 .catalog-hero h1 .explore {
-  color: var(--color-green-4);
+  color: var(--color-catalog-hero-explore);
 }
 
 .catalog-hero h1 .discover {
-  color: var(--color-blue-4);
+  color: var(--color-catalog-hero-discover);
 }
 
 .catalog-hero h1 .share {
-  color: var(--color-purple-4);
+  color: var(--color-catalog-hero-share);
 }
 
 .catalog-hero .catalog-search {
@@ -24,28 +62,35 @@
   border-radius: var(--border-radius-base);
   position: absolute;
   bottom: -1.75rem;
-  border: 2px solid var(--color-gray-darken-10);
-  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
+  border: 2px solid var(--color-catalog-hero-bg);
+  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.1);
   display: flex;
   flex-direction: row;
   align-items: center;
-  padding: 1rem;
+  padding: 1rem 0 1rem 1rem;
   left: 50%;
   transform: translateX(-50%);
+  z-index: var(--layer-base);
+  transition: all 0.2s;
 }
 .catalog-hero .catalog-search input {
   width: 100%;
-  height: 1.5rem;
+  height: calc(3.5rem - 4px);
   margin-left: 0.75rem;
   font-size: 1.125rem;
+  border-radius: var(--border-radius-base);
 }
 .catalog-hero .catalog-search input:focus {
   outline: none;
 }
+.catalog-hero .catalog-search:focus-within {
+  border-color: var(--color-main-focus-fg);
+  box-shadow: 0 0 0 2px var(--color-main-focus-outline);
+}
 
 .catalog-hero .catalog-search .icon {
   font-size: 1.5rem;
-  color: var(--color-gray-lighten-30);
+  color: var(--color-main-subtle-fg);
 }
 
 .categories {