lookbook.css in lookbook-2.0.2

- old
+ new

@@ -1444,20 +1444,31 @@
   color: var(--lookbook-input-text);
   font-size: .82rem;
 }
 
 [data-component="embed-code-dropdown"] [data-component="code"] {
-  padding: 0;
+  border-style: dashed;
+  border-width: 1px;
+  border-color: var(--lookbook-divider);
+  background-color: var(--lookbook-base-50);
+  padding: .5rem;
 }
 
 [data-component="embed-code-dropdown"] pre.code.highlight {
   white-space: normal;
   padding: 0;
   font-size: 11px;
   overflow: hidden;
 }
 
+[data-component="embed-code-dropdown"] .line-clamp-2 {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
 [data-component="header"] .header-project-icon {
   height: 1.25rem;
   width: min-content;
   flex: none;
   display: inline-block;
@@ -1926,10 +1937,14 @@
 
 .right-\[18px\] {
   right: 18px;
 }
 
+.right-px {
+  right: 1px;
+}
+
 .top-0 {
   top: 0;
 }
 
 .top-1\/2 {
@@ -1950,10 +1965,14 @@
 
 .top-\[40px\] {
   top: 40px;
 }
 
+.top-px {
+  top: 1px;
+}
+
 .\!z-\[1000\] {
   z-index: 1000 !important;
 }
 
 .z-0 {
@@ -2080,10 +2099,17 @@
 
 .mt-8 {
   margin-top: 2rem;
 }
 
+.line-clamp-2 {
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  display: -webkit-box;
+  overflow: hidden;
+}
+
 .\!block {
   display: block !important;
 }
 
 .block {
@@ -2200,12 +2226,12 @@
 
 .w-5 {
   width: 1.25rem;
 }
 
-.w-\[320px\] {
-  width: 320px;
+.w-\[360px\] {
+  width: 360px;
 }
 
 .w-\[9px\] {
   width: 9px;
 }
@@ -2499,10 +2525,14 @@
 
 .whitespace-pre-wrap {
   white-space: pre-wrap;
 }
 
+.break-all {
+  word-break: break-all;
+}
+
 .rounded-full {
   border-radius: 9999px;
 }
 
 .rounded-md {
@@ -2551,10 +2581,14 @@
 
 .border-t {
   border-top-width: 1px;
 }
 
+.border-dashed {
+  border-style: dashed;
+}
+
 .\!border-lookbook-header-border {
   border-color: var(--lookbook-header-border) !important;
 }
 
 .border-gray-300 {
@@ -2564,14 +2598,10 @@
 
 .border-lookbook-divider {
   border-color: var(--lookbook-divider);
 }
 
-.border-lookbook-dropdown-divider {
-  border-color: var(--lookbook-dropdown-divider);
-}
-
 .border-lookbook-page-header-border {
   border-color: var(--lookbook-page-header-border);
 }
 
 .border-lookbook-tabs-border-active {
@@ -2644,10 +2674,14 @@
 
 .bg-gray-100\/80 {
   background-color: #f3f4f6cc;
 }
 
+.bg-lookbook-base-50 {
+  background-color: var(--lookbook-base-50);
+}
+
 .bg-lookbook-button-bg {
   background-color: var(--lookbook-button-bg);
 }
 
 .bg-lookbook-button-bg-hover {
@@ -2829,14 +2863,10 @@
 
 .pb-12 {
   padding-bottom: 3rem;
 }
 
-.pb-3 {
-  padding-bottom: .75rem;
-}
-
 .pb-6 {
   padding-bottom: 1.5rem;
 }
 
 .pl-0 {
@@ -2881,14 +2911,10 @@
 
 .pt-2\.5 {
   padding-top: .625rem;
 }
 
-.pt-3 {
-  padding-top: .75rem;
-}
-
 .pt-8 {
   padding-top: 2rem;
 }
 
 .text-left {
@@ -3201,10 +3227,14 @@
 
 .duration-200 {
   transition-duration: .2s;
 }
 
+.duration-300 {
+  transition-duration: .3s;
+}
+
 .ease-in-out {
   transition-timing-function: cubic-bezier(.4, 0, .2, 1);
 }
 
 .bg-checked {
@@ -4080,9 +4110,13 @@
 }
 
 .focus-visible\:outline-none:focus-visible {
   outline-offset: 2px;
   outline: 2px solid #0000;
+}
+
+.group:hover .group-hover\:opacity-100 {
+  opacity: 1;
 }
 
 .prose-headings\:font-semibold :where(h1, h2, h3, h4, h5, h6, th):not(:where([class~="not-prose"] *)) {
   font-weight: 600;
 }