public/lookbook-assets/css/lookbook.css in lookbook-1.0.0.beta.5 vs public/lookbook-assets/css/lookbook.css in lookbook-1.0.0.beta.6
- old
+ new
@@ -74,10 +74,11 @@
}
button, input, optgroup, select, textarea {
font-family: inherit;
font-size: 100%;
+ font-weight: inherit;
line-height: inherit;
color: inherit;
margin: 0;
padding: 0;
}
@@ -91,11 +92,11 @@
background-color: #0000;
background-image: none;
}
:-moz-focusring {
- outline: auto;
+ outline: auto;
}
:-moz-ui-invalid {
box-shadow: none;
}
@@ -170,14 +171,10 @@
img, video {
max-width: 100%;
height: auto;
}
-[hidden] {
- display: none;
-}
-
[type="text"], [type="email"], [type="url"], [type="password"], [type="number"], [type="date"], [type="datetime-local"], [type="month"], [type="search"], [type="tel"], [type="time"], [type="week"], [multiple], textarea, select {
appearance: none;
--tw-shadow: 0 0 #0000;
background-color: #fff;
border-width: 1px;
@@ -193,11 +190,11 @@
--tw-ring-inset: var(--tw-empty, );
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--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(1px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
border-color: #2563eb;
outline: 2px solid #0000;
}
@@ -239,11 +236,10 @@
[type="checkbox"], [type="radio"] {
appearance: none;
color-adjust: exact;
vertical-align: middle;
- -webkit-user-select: none;
user-select: none;
height: 1rem;
width: 1rem;
color: #2563eb;
--tw-shadow: 0 0 #0000;
@@ -269,11 +265,11 @@
--tw-ring-inset: var(--tw-empty, );
--tw-ring-offset-width: 2px;
--tw-ring-offset-color: #fff;
--tw-ring-color: #2563eb;
--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(2px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
outline: 2px solid #0000;
}
[type="checkbox"]:checked, [type="radio"]:checked {
@@ -375,11 +371,13 @@
::-webkit-scrollbar-thumb:hover {
background-color: var(--lookbook-scrollbar-hover);
}
-*, :before, :after {
+*, :before, :after, ::backdrop {
+ --tw-border-spacing-x: 0;
+ --tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
@@ -444,11 +442,25 @@
.prose :where(strong):not(:where([class~="not-prose"] *)) {
color: var(--tw-prose-bold);
font-weight: 600;
}
+.prose :where(a strong):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+}
+
+.prose :where(blockquote strong):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+}
+
+.prose :where(thead th strong):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+}
+
.prose :where(ol):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
padding-left: 1.625em;
list-style-type: decimal;
}
.prose :where(ol[type="A"]):not(:where([class~="not-prose"] *)) {
@@ -486,10 +498,12 @@
.prose :where(ol[type="1"]):not(:where([class~="not-prose"] *)) {
list-style-type: decimal;
}
.prose :where(ul):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+ margin-bottom: 1.25em;
padding-left: 1.625em;
list-style-type: disc;
}
.prose :where(ol > li):not(:where([class~="not-prose"] *))::marker {
@@ -536,10 +550,11 @@
font-weight: 800;
line-height: 1.11111;
}
.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
+ color: inherit;
font-weight: 900;
}
.prose :where(h2):not(:where([class~="not-prose"] *)) {
color: var(--tw-prose-headings);
@@ -549,10 +564,11 @@
font-weight: 700;
line-height: 1.33333;
}
.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
+ color: inherit;
font-weight: 800;
}
.prose :where(h3):not(:where([class~="not-prose"] *)) {
color: var(--tw-prose-headings);
@@ -562,10 +578,11 @@
font-weight: 600;
line-height: 1.6;
}
.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
+ color: inherit;
font-weight: 700;
}
.prose :where(h4):not(:where([class~="not-prose"] *)) {
color: var(--tw-prose-headings);
@@ -574,13 +591,19 @@
font-weight: 600;
line-height: 1.5;
}
.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
+ color: inherit;
font-weight: 700;
}
+.prose :where(img):not(:where([class~="not-prose"] *)) {
+ margin-top: 2em;
+ margin-bottom: 2em;
+}
+
.prose :where(figure > *):not(:where([class~="not-prose"] *)) {
margin-top: 0;
margin-bottom: 0;
}
@@ -600,13 +623,39 @@
.prose :where(code):not(:where([class~="not-prose"] *)):before, .prose :where(code):not(:where([class~="not-prose"] *)):after {
content: "`";
}
.prose :where(a code):not(:where([class~="not-prose"] *)) {
- color: var(--tw-prose-links);
+ color: inherit;
}
+.prose :where(h1 code):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+}
+
+.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+ font-size: .875em;
+}
+
+.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+ font-size: .9em;
+}
+
+.prose :where(h4 code):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+}
+
+.prose :where(blockquote code):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+}
+
+.prose :where(thead th code):not(:where([class~="not-prose"] *)) {
+ color: inherit;
+}
+
.prose :where(pre):not(:where([class~="not-prose"] *)) {
color: var(--tw-prose-pre-code);
background-color: var(--tw-prose-pre-bg);
border-radius: .375rem;
margin-top: 1.71429em;
@@ -667,13 +716,21 @@
border-bottom-width: 0;
}
.prose :where(tbody td):not(:where([class~="not-prose"] *)) {
vertical-align: baseline;
- padding: .571429em;
}
+.prose :where(tfoot):not(:where([class~="not-prose"] *)) {
+ border-top-width: 1px;
+ border-top-color: var(--tw-prose-th-borders);
+}
+
+.prose :where(tfoot td):not(:where([class~="not-prose"] *)) {
+ vertical-align: top;
+}
+
.prose {
--tw-prose-body: #374151;
--tw-prose-headings: #111827;
--tw-prose-lead: #4b5563;
--tw-prose-links: #111827;
@@ -712,33 +769,20 @@
.prose :where(p):not(:where([class~="not-prose"] *)) {
margin-top: 1.25em;
margin-bottom: 1.25em;
}
-.prose :where(img):not(:where([class~="not-prose"] *)) {
- margin-top: 2em;
- margin-bottom: 2em;
-}
-
.prose :where(video):not(:where([class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
.prose :where(figure):not(:where([class~="not-prose"] *)) {
margin-top: 2em;
margin-bottom: 2em;
}
-.prose :where(h2 code):not(:where([class~="not-prose"] *)) {
- font-size: .875em;
-}
-
-.prose :where(h3 code):not(:where([class~="not-prose"] *)) {
- font-size: .9em;
-}
-
.prose :where(li):not(:where([class~="not-prose"] *)) {
margin-top: .5em;
margin-bottom: .5em;
}
@@ -748,28 +792,28 @@
.prose :where(ul > li):not(:where([class~="not-prose"] *)) {
padding-left: .375em;
}
-.prose > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
margin-top: .75em;
margin-bottom: .75em;
}
-.prose > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.25em;
}
-.prose > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
-.prose > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.25em;
}
-.prose > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.25em;
}
.prose :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
margin-top: .75em;
@@ -798,23 +842,27 @@
.prose :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
-.prose :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
+ padding: .571429em;
+}
+
+.prose :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
padding-left: 0;
}
-.prose :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
-.prose > :where(:first-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
-.prose > :where(:last-child):not(:where([class~="not-prose"] *)) {
+.prose :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 0;
}
.prose-sm {
font-size: .875rem;
@@ -912,14 +960,18 @@
font-size: .857143em;
line-height: 1.66667;
}
.prose-sm :where(ol):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.14286em;
+ margin-bottom: 1.14286em;
padding-left: 1.57143em;
}
.prose-sm :where(ul):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.14286em;
+ margin-bottom: 1.14286em;
padding-left: 1.57143em;
}
.prose-sm :where(li):not(:where([class~="not-prose"] *)) {
margin-top: .285714em;
@@ -932,28 +984,28 @@
.prose-sm :where(ul > li):not(:where([class~="not-prose"] *)) {
padding-left: .428571em;
}
-.prose-sm > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
margin-top: .571429em;
margin-bottom: .571429em;
}
-.prose-sm > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.14286em;
}
-.prose-sm > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.14286em;
}
-.prose-sm > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.14286em;
}
-.prose-sm > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.14286em;
}
.prose-sm :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
margin-top: .571429em;
@@ -998,30 +1050,59 @@
.prose-sm :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
-.prose-sm :where(tbody td):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
padding: .666667em 1em;
}
-.prose-sm :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
padding-left: 0;
}
-.prose-sm :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
-.prose-sm > :where(:first-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
-.prose-sm > :where(:last-child):not(:where([class~="not-prose"] *)) {
+.prose-sm :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 0;
}
+.prose-base :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+ margin-top: .75em;
+ margin-bottom: .75em;
+}
+
+.prose-base :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+}
+
+.prose-base :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.25em;
+}
+
+.prose-base :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.25em;
+}
+
+.prose-base :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.25em;
+}
+
+.prose-base :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+}
+
+.prose-base :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 0;
+}
+
.prose-lg {
font-size: 1.125rem;
line-height: 1.77778;
}
@@ -1116,14 +1197,18 @@
font-size: .888889em;
line-height: 1.75;
}
.prose-lg :where(ol):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.33333em;
+ margin-bottom: 1.33333em;
padding-left: 1.55556em;
}
.prose-lg :where(ul):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.33333em;
+ margin-bottom: 1.33333em;
padding-left: 1.55556em;
}
.prose-lg :where(li):not(:where([class~="not-prose"] *)) {
margin-top: .666667em;
@@ -1136,28 +1221,28 @@
.prose-lg :where(ul > li):not(:where([class~="not-prose"] *)) {
padding-left: .444444em;
}
-.prose-lg > :where(ul > li p):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
margin-top: .888889em;
margin-bottom: .888889em;
}
-.prose-lg > :where(ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.33333em;
}
-.prose-lg > :where(ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.33333em;
}
-.prose-lg > :where(ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 1.33333em;
}
-.prose-lg > :where(ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 1.33333em;
}
.prose-lg :where(ul ul, ul ol, ol ul, ol ol):not(:where([class~="not-prose"] *)) {
margin-top: .888889em;
@@ -1202,33 +1287,91 @@
.prose-lg :where(thead th:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
-.prose-lg :where(tbody td):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(tbody td, tfoot td):not(:where([class~="not-prose"] *)) {
padding: .75em;
}
-.prose-lg :where(tbody td:first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(tbody td:first-child, tfoot td:first-child):not(:where([class~="not-prose"] *)) {
padding-left: 0;
}
-.prose-lg :where(tbody td:last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(tbody td:last-child, tfoot td:last-child):not(:where([class~="not-prose"] *)) {
padding-right: 0;
}
-.prose-lg > :where(:first-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
margin-top: 0;
}
-.prose-lg > :where(:last-child):not(:where([class~="not-prose"] *)) {
+.prose-lg :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
margin-bottom: 0;
}
+.prose-xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+ margin-top: .8em;
+ margin-bottom: .8em;
+}
+
+.prose-xl :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.2em;
+}
+
+.prose-xl :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.2em;
+}
+
+.prose-xl :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.2em;
+}
+
+.prose-xl :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.2em;
+}
+
+.prose-xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+}
+
+.prose-xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 0;
+}
+
+.prose-2xl :where(.prose > ul > li p):not(:where([class~="not-prose"] *)) {
+ margin-top: .833333em;
+ margin-bottom: .833333em;
+}
+
+.prose-2xl :where(.prose > ul > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.33333em;
+}
+
+.prose-2xl :where(.prose > ul > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.33333em;
+}
+
+.prose-2xl :where(.prose > ol > li > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 1.33333em;
+}
+
+.prose-2xl :where(.prose > ol > li > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 1.33333em;
+}
+
+.prose-2xl :where(.prose > :first-child):not(:where([class~="not-prose"] *)) {
+ margin-top: 0;
+}
+
+.prose-2xl :where(.prose > :last-child):not(:where([class~="not-prose"] *)) {
+ margin-bottom: 0;
+}
+
.theme-github-light {
--tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.theme-github-light .highlight .hll {
background-color: #f8f8f8;
border: 1px solid #ccc;
@@ -1461,20 +1604,19 @@
[data-component="code"].numbered .line-numbers {
width: min-content;
z-index: 10;
height: 100%;
- -webkit-user-select: none;
user-select: none;
border-style: dashed;
border-right-width: 1px;
border-color: var(--lookbook-divider);
--tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
text-align: right;
--tw-text-opacity: 1;
- color: rgb(156 163 175 / var(--tw-text-opacity) );
+ color: rgb(156 163 175 / var(--tw-text-opacity));
padding: .75rem;
}
[data-component="code"].numbered .line-number {
min-width: 1.4em;
@@ -1498,17 +1640,17 @@
opacity: .3 !important;
}
[data-component="code"].focussed .code .line.highlighted {
--tw-bg-opacity: 1;
- background-color: rgb(254 252 232 / var(--tw-bg-opacity) );
+ background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
[data-component="icon"] {
flex: none;
line-height: 1;
- transition-property: color, background-color, border-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, backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
display: block;
}
@@ -1576,26 +1718,25 @@
align-items: center;
display: flex;
}
[data-component="viewport"] .resize-handle:hover {
- background-color: rgb(224 231 255 / var(--tw-bg-opacity) );
+ background-color: rgb(224 231 255 / var(--tw-bg-opacity));
--tw-bg-opacity: .2;
}
[data-component="viewport"] .resize-handle {
touch-action: none;
- -webkit-user-select: none;
user-select: none;
- color: var(--lookbook-viewport-handle-icon);
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter;
+ color: var(--lookbook-viewport-handle-icon-stroke);
+ transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
[data-component="viewport"] .resize-handle:hover {
- color: var(--lookbook-viewport-handle-icon-hover);
+ color: var(--lookbook-viewport-handle-icon-stroke-hover);
}
.form-input {
color: var(--lookbook-input-text);
}
@@ -1614,11 +1755,11 @@
--tw-ring-color: var(--lookbook-input-border-focus);
}
.form-input {
width: 100%;
- background-color: var(--lookbook-input);
+ background-color: var(--lookbook-input-bg);
border-radius: .375rem;
font-size: .875rem;
line-height: 1.25rem;
}
@@ -1814,18 +1955,18 @@
.mr-1\.5 {
margin-right: .375rem;
}
-.\!block {
- display: block !important;
-}
-
.block {
display: block;
}
+.\!block {
+ display: block !important;
+}
+
.inline-block {
display: inline-block;
}
.inline {
@@ -1846,18 +1987,18 @@
.contents {
display: contents;
}
-.\!hidden {
- display: none !important;
-}
-
.hidden {
display: none;
}
+.\!hidden {
+ display: none !important;
+}
+
.h-screen {
height: 100vh;
}
.h-full {
@@ -2008,46 +2149,46 @@
flex-grow: 1;
}
.translate-x-0 {
--tw-translate-x: 0px;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-full {
--tw-translate-x: 100%;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-y-1\/2 {
--tw-translate-y: -50%;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.-translate-x-1\/2 {
--tw-translate-x: -50%;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.translate-x-5 {
--tw-translate-x: 1.25rem;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-180 {
--tw-rotate: 180deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-90 {
--tw-rotate: 90deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.rotate-45 {
--tw-rotate: 45deg;
- transform: translate(var(--tw-translate-x), var(--tw-translate-y) ) rotate(var(--tw-rotate) ) skewX(var(--tw-skew-x) ) skewY(var(--tw-skew-y) ) scaleX(var(--tw-scale-x) ) scaleY(var(--tw-scale-y) );
+ transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
@keyframes spin {
to {
transform: rotate(360deg);
@@ -2081,11 +2222,10 @@
.cursor-pointer {
cursor: pointer;
}
.select-none {
- -webkit-user-select: none;
user-select: none;
}
.resize {
resize: both;
@@ -2139,51 +2279,51 @@
justify-content: space-between;
}
.space-x-1 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(.25rem * var(--tw-space-x-reverse) );
- margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse) ) );
+ margin-right: calc(.25rem * var(--tw-space-x-reverse));
+ margin-left: calc(.25rem * calc(1 - var(--tw-space-x-reverse)) );
}
.space-y-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
- margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse) ) );
- margin-bottom: calc(.5rem * var(--tw-space-y-reverse) );
+ margin-top: calc(.5rem * calc(1 - var(--tw-space-y-reverse)) );
+ margin-bottom: calc(.5rem * var(--tw-space-y-reverse));
}
.space-x-2 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(.5rem * var(--tw-space-x-reverse) );
- margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse) ) );
+ margin-right: calc(.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(.5rem * calc(1 - var(--tw-space-x-reverse)) );
}
.space-x-6 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(1.5rem * var(--tw-space-x-reverse) );
- margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse) ) );
+ margin-right: calc(1.5rem * var(--tw-space-x-reverse));
+ margin-left: calc(1.5rem * calc(1 - var(--tw-space-x-reverse)) );
}
.space-x-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-x-reverse: 0;
- margin-right: calc(.75rem * var(--tw-space-x-reverse) );
- margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse) ) );
+ margin-right: calc(.75rem * var(--tw-space-x-reverse));
+ margin-left: calc(.75rem * calc(1 - var(--tw-space-x-reverse)) );
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
--tw-divide-y-reverse: 0;
- border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse) ) );
- border-bottom-width: calc(1px * var(--tw-divide-y-reverse) );
+ border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)) );
+ border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-dashed > :not([hidden]) ~ :not([hidden]) {
border-style: dashed;
}
.divide-red-200 > :not([hidden]) ~ :not([hidden]) {
--tw-divide-opacity: 1;
- border-color: rgb(254 202 202 / var(--tw-divide-opacity) );
+ border-color: rgb(254 202 202 / var(--tw-divide-opacity));
}
.divide-lookbook-divider > :not([hidden]) ~ :not([hidden]) {
border-color: var(--lookbook-divider);
}
@@ -2290,94 +2430,94 @@
border-style: dashed;
}
.border-red-200 {
--tw-border-opacity: 1;
- border-color: rgb(254 202 202 / var(--tw-border-opacity) );
+ border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
.border-lookbook-divider {
border-color: var(--lookbook-divider);
}
.border-gray-300 {
--tw-border-opacity: 1;
- border-color: rgb(209 213 219 / var(--tw-border-opacity) );
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
.border-gray-200 {
--tw-border-opacity: 1;
- border-color: rgb(229 231 235 / var(--tw-border-opacity) );
+ border-color: rgb(229 231 235 / var(--tw-border-opacity));
}
.\!border-lookbook-header-border {
border-color: var(--lookbook-header-border) !important;
}
.border-transparent {
border-color: #0000;
}
-.border-lookbook-tabs-highlight {
- border-color: var(--lookbook-tabs-highlight);
+.border-lookbook-tabs-border-active {
+ border-color: var(--lookbook-tabs-border-active);
}
.bg-white {
--tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
.bg-red-50 {
--tw-bg-opacity: 1;
- background-color: rgb(254 242 242 / var(--tw-bg-opacity) );
+ background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
.bg-red-100 {
--tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity) );
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
-.bg-lookbook-sidebar {
- background-color: var(--lookbook-sidebar);
+.bg-lookbook-sidebar-bg {
+ background-color: var(--lookbook-sidebar-bg);
}
.bg-black {
--tw-bg-opacity: 1;
- background-color: rgb(0 0 0 / var(--tw-bg-opacity) );
+ background-color: rgb(0 0 0 / var(--tw-bg-opacity));
}
-.bg-lookbook-page {
- background-color: var(--lookbook-page);
+.bg-lookbook-page-bg {
+ background-color: var(--lookbook-page-bg);
}
.bg-transparent {
background-color: #0000;
}
-.bg-lookbook-drawer {
- background-color: var(--lookbook-drawer);
+.bg-lookbook-drawer-bg {
+ background-color: var(--lookbook-drawer-bg);
}
-.bg-lookbook-prose {
- background-color: var(--lookbook-prose);
+.bg-lookbook-prose-bg {
+ background-color: var(--lookbook-prose-bg);
}
-.\!bg-lookbook-header {
- background-color: var(--lookbook-header) !important;
+.\!bg-lookbook-header-bg {
+ background-color: var(--lookbook-header-bg) !important;
}
.bg-zinc-50 {
--tw-bg-opacity: 1;
- background-color: rgb(250 250 250 / var(--tw-bg-opacity) );
+ background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}
.bg-lookbook-divider {
background-color: var(--lookbook-divider);
}
-.bg-lookbook-toolbar {
- background-color: var(--lookbook-toolbar);
+.bg-lookbook-toolbar-bg {
+ background-color: var(--lookbook-toolbar-bg);
}
.bg-lookbook-viewport-handle {
background-color: var(--lookbook-viewport-handle);
}
@@ -2509,10 +2649,14 @@
.pb-12 {
padding-bottom: 3rem;
}
+.pt-\[4px\] {
+ padding-top: 4px;
+}
+
.pb-0 {
padding-bottom: 0;
}
.pr-2 {
@@ -2600,40 +2744,44 @@
letter-spacing: .05em;
}
.text-red-300 {
--tw-text-opacity: 1;
- color: rgb(252 165 165 / var(--tw-text-opacity) );
+ color: rgb(252 165 165 / var(--tw-text-opacity));
}
.text-red-700 {
--tw-text-opacity: 1;
- color: rgb(185 28 28 / var(--tw-text-opacity) );
+ color: rgb(185 28 28 / var(--tw-text-opacity));
}
.text-red-900 {
--tw-text-opacity: 1;
- color: rgb(127 29 29 / var(--tw-text-opacity) );
+ color: rgb(127 29 29 / var(--tw-text-opacity));
}
.text-gray-400 {
--tw-text-opacity: 1;
- color: rgb(156 163 175 / var(--tw-text-opacity) );
+ color: rgb(156 163 175 / var(--tw-text-opacity));
}
.text-red-800 {
--tw-text-opacity: 1;
- color: rgb(153 27 27 / var(--tw-text-opacity) );
+ color: rgb(153 27 27 / var(--tw-text-opacity));
}
-.text-lookbook-button-text {
- color: var(--lookbook-button-text);
+.text-lookbook-icon-button-stroke {
+ color: var(--lookbook-icon-button-stroke);
}
+.text-lookbook-icon-button-stroke-hover {
+ color: var(--lookbook-icon-button-stroke-hover);
+}
+
.text-green-500 {
--tw-text-opacity: 1;
- color: rgb(34 197 94 / var(--tw-text-opacity) );
+ color: rgb(34 197 94 / var(--tw-text-opacity));
}
.\!text-lookbook-header-text {
color: var(--lookbook-header-text) !important;
}
@@ -2642,37 +2790,41 @@
color: var(--lookbook-branding-text);
}
.text-green-600 {
--tw-text-opacity: 1;
- color: rgb(22 163 74 / var(--tw-text-opacity) );
+ color: rgb(22 163 74 / var(--tw-text-opacity));
}
.text-lookbook-prose-text {
color: var(--lookbook-prose-text);
}
-.text-lookbook-viewport-handle-icon {
- color: var(--lookbook-viewport-handle-icon);
+.text-lookbook-viewport-handle-icon-stroke {
+ color: var(--lookbook-viewport-handle-icon-stroke);
}
.text-lookbook-nav-text {
color: var(--lookbook-nav-text);
}
.text-lookbook-nav-toggle {
color: var(--lookbook-nav-toggle);
}
-.text-lookbook-nav-icon {
- color: var(--lookbook-nav-icon);
+.text-lookbook-nav-icon-stroke {
+ color: var(--lookbook-nav-icon-stroke);
}
.text-lookbook-tabs-text {
color: var(--lookbook-tabs-text);
}
+.text-lookbook-tabs-text-hover {
+ color: var(--lookbook-tabs-text-hover);
+}
+
.\!text-lookbook-tabs-text-disabled {
color: var(--lookbook-tabs-text-disabled) !important;
}
.underline {
@@ -2721,11 +2873,11 @@
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.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);
+ --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);
}
.blur {
--tw-blur: blur(8px);
@@ -2741,11 +2893,11 @@
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.transition {
- transition-property: color, background-color, border-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, backdrop-filter;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.transition-opacity {
@@ -2783,11 +2935,11 @@
.tippy-box {
color: #fff;
white-space: normal;
background-color: #333;
border-radius: 4px;
- outline: none;
+ outline: 0;
font-size: 14px;
line-height: 1.4;
transition-property: transform, visibility, opacity;
position: relative;
}
@@ -2860,11 +3012,11 @@
padding: 5px 9px;
position: relative;
}
.tippy-box {
- border: none;
+ border: 1px #0000;
}
.tippy-box[data-placement^="top"] > .tippy-arrow:after {
border-top-color: inherit;
border-width: 8px 8px 0;
@@ -2921,37 +3073,37 @@
position: absolute;
}
.tippy-box[data-theme~="tooltip"] {
opacity: .9;
- background-color: var(--lookbook-tooltip);
+ background-color: var(--lookbook-tooltip-bg);
color: var(--lookbook-tooltip-text);
font-size: .75rem;
line-height: 1rem;
}
.tippy-box[data-theme~="tooltip"][data-placement^="top"] > .tippy-arrow:before {
- border-top-color: var(--lookbook-tooltip);
+ border-top-color: var(--lookbook-tooltip-bg);
}
.tippy-box[data-theme~="tooltip"][data-placement^="bottom"] > .tippy-arrow:before {
- border-bottom-color: var(--lookbook-tooltip);
+ border-bottom-color: var(--lookbook-tooltip-bg);
}
.tippy-box[data-theme~="tooltip"][data-placement^="left"] > .tippy-arrow:before {
- border-left-color: var(--lookbook-tooltip);
+ border-left-color: var(--lookbook-tooltip-bg);
}
.tippy-box[data-theme~="tooltip"][data-placement^="right"] > .tippy-arrow:before {
- border-right-color: var(--lookbook-tooltip);
+ border-right-color: var(--lookbook-tooltip-bg);
}
.tippy-box[data-theme~="menu"] {
--tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity) );
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
--tw-text-opacity: 1;
- color: rgb(75 85 99 / var(--tw-text-opacity) );
+ color: rgb(75 85 99 / var(--tw-text-opacity));
--tw-shadow: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000001a;
--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
border: 1px solid #d1d5db;
}
@@ -2982,33 +3134,33 @@
background-color: var(--lookbook-draggable-hint);
}
.hover\:bg-indigo-100:hover {
--tw-bg-opacity: 1;
- background-color: rgb(224 231 255 / var(--tw-bg-opacity) );
+ background-color: rgb(224 231 255 / var(--tw-bg-opacity));
}
.hover\:bg-lookbook-nav-item-hover:hover {
background-color: var(--lookbook-nav-item-hover);
}
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
- color: rgb(17 24 39 / var(--tw-text-opacity) );
+ color: rgb(17 24 39 / var(--tw-text-opacity));
}
.hover\:text-indigo-800:hover {
--tw-text-opacity: 1;
- color: rgb(55 48 163 / var(--tw-text-opacity) );
+ color: rgb(55 48 163 / var(--tw-text-opacity));
}
-.hover\:text-lookbook-button-text-hover:hover {
- color: var(--lookbook-button-text-hover);
+.hover\:text-lookbook-icon-button-stroke-hover:hover {
+ color: var(--lookbook-icon-button-stroke-hover);
}
-.hover\:text-lookbook-viewport-handle-icon-hover:hover {
- color: var(--lookbook-viewport-handle-icon-hover);
+.hover\:text-lookbook-viewport-handle-icon-stroke-hover:hover {
+ color: var(--lookbook-viewport-handle-icon-stroke-hover);
}
.hover\:text-lookbook-tabs-text-hover:hover {
color: var(--lookbook-tabs-text-hover);
}
@@ -3026,16 +3178,16 @@
outline: 2px solid #0000;
}
.focus\:ring-0:focus {
--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);
+ --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);
}
.focus\:ring-2:focus {
--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(2px + var(--tw-ring-offset-width) ) var(--tw-ring-color);
+ --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + 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);
}
.focus\:ring-offset-2:focus {
--tw-ring-offset-width: 2px;