Added new shaders

ui/src/styles.css

@@ -591,7 +591,8 @@ pre {
 }
 
 .layer-card__drag-handle:hover:not(:disabled),
-.parameter__osc:hover:not(:disabled) {
+.parameter__osc:hover:not(:disabled),
+.parameter__reset:hover:not(:disabled) {
   background: transparent;
   color: var(--app-text);
 }
@@ -604,6 +605,28 @@ pre {
   gap: 0.75rem;
 }
 
+.shader-description {
+  padding: 0.75rem;
+  border: 1px solid var(--app-border);
+  border-radius: var(--app-radius);
+  background: rgba(255, 255, 255, 0.025);
+  user-select: text;
+}
+
+.shader-description__meta {
+  margin-bottom: 0.25rem;
+  color: var(--app-muted);
+  font-size: 0.78rem;
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.shader-description p {
+  margin: 0;
+  color: var(--app-text);
+  overflow-wrap: anywhere;
+}
+
 .shader-picker__topline {
   display: flex;
   align-items: baseline;
@@ -617,7 +640,8 @@ pre {
 .shader-picker__empty,
 .parameter__value,
 .parameter__alpha,
-.parameter__osc {
+.parameter__osc,
+.parameter__reset {
   color: var(--app-muted);
   font-size: 0.78rem;
 }
@@ -634,7 +658,8 @@ pre {
   align-items: center;
   justify-content: space-between;
   gap: 0.625rem;
-  min-height: 54px;
+  min-height: 50px;
+  padding: 0.55rem 0.7rem;
   text-align: left;
   background: #182232;
   border-color: var(--app-border);
@@ -642,7 +667,7 @@ pre {
 
 .shader-picker__trigger > span {
   display: grid;
-  gap: 0.125rem;
+  gap: 0.2rem;
   min-width: 0;
 }
 
@@ -654,8 +679,8 @@ pre {
 
 .shader-picker__popover {
   display: grid;
-  gap: 0.5rem;
-  padding: 0.5rem;
+  gap: 0.45rem;
+  padding: 0.45rem;
   border: 1px solid var(--app-border);
   background: #121821;
 }
@@ -674,27 +699,28 @@ pre {
 
 .shader-picker__search input {
   padding-left: 2.125rem;
+  min-height: 34px;
 }
 
 .shader-picker__list {
   display: grid;
-  gap: 0.375rem;
-  max-height: 220px;
+  gap: 0.45rem;
+  max-height: 250px;
   overflow-y: auto;
-  padding: 0.375rem;
+  padding: 0.5rem;
   border: 1px solid var(--app-border);
   background: #10151d;
 }
 
 .shader-picker__option {
   display: grid;
-  gap: 0.125rem;
-  min-height: 58px;
-  padding: 0.5rem 0.625rem;
+  gap: 0.25rem;
+  min-height: 4.25rem;
+  padding: 0.65rem 0.75rem;
   text-align: left;
   background: #182232;
   border-color: var(--app-border);
-  align-content: center;
+  align-content: start;
   line-height: 1.25;
 }
 
@@ -707,14 +733,58 @@ pre {
 .shader-picker__name,
 .shader-picker__meta {
   min-width: 0;
-  overflow: hidden;
   overflow-wrap: anywhere;
 }
 
+.shader-picker__option-head {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 0.5rem;
+  min-width: 0;
+}
+
 .shader-picker__name {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
   font-weight: 700;
 }
 
+.shader-picker__category {
+  flex: 0 0 auto;
+  max-width: 8rem;
+  overflow: hidden;
+  margin-top: 0.05rem;
+  padding: 0.14rem 0.42rem;
+  border: 1px solid rgba(26, 156, 219, 0.35);
+  border-radius: var(--app-radius-sm);
+  background: rgba(26, 156, 219, 0.12);
+  color: #b9def1;
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-overflow: ellipsis;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.shader-picker__meta {
+  display: -webkit-box;
+  overflow: hidden;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  line-height: 1.3;
+  min-height: 2.05em;
+}
+
+.shader-picker__trigger .shader-picker__meta {
+  -webkit-line-clamp: 1;
+  line-clamp: 1;
+  min-height: 0;
+}
+
 .shader-picker__empty {
   padding: 0.625rem;
 }
@@ -732,12 +802,13 @@ pre {
 
 .parameter__header {
   display: grid;
-  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr);
+  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
   gap: 0.5rem;
   align-items: center;
 }
 
-.parameter__osc {
+.parameter__osc,
+.parameter__reset {
   display: inline-flex;
   align-items: center;
   justify-content: flex-end;
@@ -751,6 +822,13 @@ pre {
   font-weight: 500;
 }
 
+.parameter__reset {
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
+  color: var(--app-muted);
+}
+
 .parameter__osc span {
   min-width: 0;
   overflow: hidden;
@@ -758,7 +836,8 @@ pre {
   white-space: nowrap;
 }
 
-.parameter__osc svg {
+.parameter__osc svg,
+.parameter__reset svg {
   flex: 0 0 auto;
 }
 
@@ -777,11 +856,29 @@ pre {
   min-width: 7.5rem;
 }
 
-.parameter__color-row {
+.parameter__wheel-row {
   display: grid;
-  grid-template-columns: minmax(5.75rem, 0.42fr) minmax(7.5rem, 0.58fr);
+  grid-template-columns: auto minmax(5.25rem, 1fr);
   gap: 0.5rem;
-  align-items: end;
+  align-items: start;
+}
+
+.parameter__wheel {
+  width: 132px;
+  height: 132px;
+}
+
+.parameter__wheel [class*="react-colorful"],
+.parameter__wheel > div {
+  max-width: 100%;
+}
+
+.parameter__swatch {
+  grid-column: 2;
+  width: 100%;
+  min-height: 28px;
+  border: 1px solid var(--app-border);
+  border-radius: var(--app-radius-sm);
 }
 
 .parameter__alpha {
@@ -866,10 +963,18 @@ pre {
   .kv-rows,
   .parameter-grid,
   .parameter__header,
-  .parameter__color-row {
+  .parameter__wheel-row {
     grid-template-columns: 1fr;
   }
 
+  .parameter__reset {
+    width: 100%;
+  }
+
+  .parameter__swatch {
+    grid-column: auto;
+  }
+
   .kv-row {
     grid-template-columns: minmax(6.25rem, 0.6fr) minmax(0, 1fr);
   }