public/lookbook-assets/css/lookbook.css in lookbook-2.0.0.beta.4 vs public/lookbook-assets/css/lookbook.css in lookbook-2.0.0.beta.5
- old
+ new
@@ -405,11 +405,11 @@
::-webkit-scrollbar-thumb {
background-color: var(--lookbook-scrollbar);
background-clip: content-box;
border-radius: 9999px;
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
::-webkit-scrollbar-thumb:hover {
@@ -1452,14 +1452,26 @@
padding: 0;
font-size: 11px;
overflow: hidden;
}
+[data-component="header"] .header-project-icon {
+ height: 1.25rem;
+ width: min-content;
+ flex: none;
+ display: inline-block;
+}
+
+[data-component="header"] .header-project-icon svg {
+ height: 100%;
+ width: auto;
+}
+
[data-component="icon"] {
flex: none;
line-height: 1;
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
display: block;
}
@@ -1470,10 +1482,18 @@
stroke: currentColor;
stroke-linecap: round;
stroke-linejoin: round;
}
+[data-component="icon"].icon-stroke-2 svg {
+ stroke-width: 2px;
+}
+
+[data-component="icon"].icon-stroke-1 svg {
+ stroke-width: 1px;
+}
+
.lookbook-panel {
min-height: 100%;
padding: 1rem;
}
@@ -1554,11 +1574,11 @@
user-select: none;
color: var(--lookbook-nav-text);
align-items: center;
padding-top: .25rem;
padding-bottom: .25rem;
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
display: flex;
}
@@ -1727,11 +1747,11 @@
[data-component="viewport"] .resize-handle {
touch-action: none;
-webkit-user-select: none;
user-select: none;
color: var(--lookbook-viewport-handle-icon-stroke);
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
[data-component="viewport"] .resize-handle:hover {
@@ -2401,10 +2421,14 @@
.divide-lookbook-divider > :not([hidden]) ~ :not([hidden]) {
border-color: var(--lookbook-divider);
}
+.divide-lookbook-viewport-handle-icon-stroke-hover > :not([hidden]) ~ :not([hidden]) {
+ border-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.overflow-auto {
overflow: auto;
}
.overflow-hidden {
@@ -2512,19 +2536,49 @@
.border-lookbook-tabs-border-active {
border-color: var(--lookbook-tabs-border-active);
}
+.border-lookbook-viewport-handle-icon-stroke-hover {
+ border-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.border-red-200 {
--tw-border-opacity: 1;
border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.border-transparent {
border-color: #0000;
}
+.border-x-lookbook-viewport-handle-icon-stroke-hover {
+ border-left-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+ border-right-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-y-lookbook-viewport-handle-icon-stroke-hover {
+ border-top-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+ border-bottom-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-b-lookbook-viewport-handle-icon-stroke-hover {
+ border-bottom-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-l-lookbook-viewport-handle-icon-stroke-hover {
+ border-left-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-r-lookbook-viewport-handle-icon-stroke-hover {
+ border-right-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.border-t-lookbook-viewport-handle-icon-stroke-hover {
+ border-top-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.\!bg-lookbook-header-bg {
background-color: var(--lookbook-header-bg) !important;
}
.\!bg-lookbook-nav-item-active {
@@ -2582,10 +2636,14 @@
.bg-lookbook-toolbar-bg {
background-color: var(--lookbook-toolbar-bg);
}
+.bg-lookbook-viewport-handle-icon-stroke-hover {
+ background-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.bg-red-100 {
--tw-bg-opacity: 1;
background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
@@ -2606,10 +2664,33 @@
.bg-zinc-50 {
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}
+.from-lookbook-viewport-handle-icon-stroke-hover {
+ --tw-gradient-from: var(--lookbook-viewport-handle-icon-stroke-hover);
+ --tw-gradient-to: #fff0;
+ --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
+.via-lookbook-viewport-handle-icon-stroke-hover {
+ --tw-gradient-to: #fff0;
+ --tw-gradient-stops: var(--tw-gradient-from), var(--lookbook-viewport-handle-icon-stroke-hover), var(--tw-gradient-to);
+}
+
+.to-lookbook-viewport-handle-icon-stroke-hover {
+ --tw-gradient-to: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.fill-lookbook-viewport-handle-icon-stroke-hover {
+ fill: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.stroke-lookbook-viewport-handle-icon-stroke-hover {
+ stroke: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.p-1 {
padding: .25rem;
}
.p-2 {
@@ -2897,10 +2978,14 @@
.text-lookbook-tabs-text-hover {
color: var(--lookbook-tabs-text-hover);
}
+.text-lookbook-viewport-handle-icon-stroke-hover {
+ color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.text-red-700 {
--tw-text-opacity: 1;
color: rgb(185 28 28 / var(--tw-text-opacity));
}
@@ -2911,10 +2996,27 @@
.underline {
text-decoration-line: underline;
}
+.decoration-lookbook-viewport-handle-icon-stroke-hover {
+ -webkit-text-decoration-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+ text-decoration-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.placeholder-lookbook-viewport-handle-icon-stroke-hover::placeholder {
+ color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.caret-lookbook-viewport-handle-icon-stroke-hover {
+ caret-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.accent-lookbook-viewport-handle-icon-stroke-hover {
+ accent-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.\!opacity-100 {
opacity: 1 !important;
}
.\!opacity-30 {
@@ -2961,27 +3063,44 @@
--tw-shadow: 0 1px 3px 0 #0000001a, 0 1px 2px -1px #0000001a;
--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
+.shadow-lookbook-viewport-handle-icon-stroke-hover {
+ --tw-shadow-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+ --tw-shadow: var(--tw-shadow-colored);
+}
+
+.outline-lookbook-viewport-handle-icon-stroke-hover {
+ outline-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.ring-0 {
--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
+.ring-lookbook-viewport-handle-icon-stroke-hover {
+ --tw-ring-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
+.ring-offset-lookbook-viewport-handle-icon-stroke-hover {
+ --tw-ring-offset-color: var(--lookbook-viewport-handle-icon-stroke-hover);
+}
+
.blur {
--tw-blur: blur(8px);
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.transition-\[height\] {
@@ -2995,10 +3114,10 @@
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.transition-colors {
- transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke;
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.transition-opacity {