public/lookbook-assets/css/lookbook.css in lookbook-1.5.5 vs public/lookbook-assets/css/lookbook.css in lookbook-2.0.0.beta.0
- old
+ new
@@ -25,22 +25,20 @@
color: inherit;
border-top-width: 1px;
}
abbr:where([title]) {
- -webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
h1, h2, h3, h4, h5, h6 {
font-size: inherit;
font-weight: inherit;
}
a {
color: inherit;
- -webkit-text-decoration: inherit;
text-decoration: inherit;
}
b, strong {
font-weight: bolder;
@@ -1401,29 +1399,27 @@
[data-component="code"].focussed .code .line.highlighted {
--tw-bg-opacity: 1;
background-color: rgb(254 252 232 / var(--tw-bg-opacity));
}
-[data-component="display-options-field"] [type="text"], [data-component="display-options-field"] [type="email"], [data-component="display-options-field"] [type="url"], [data-component="display-options-field"] [type="password"], [data-component="display-options-field"] [type="number"], [data-component="display-options-field"] [type="date"], [data-component="display-options-field"] [type="datetime-local"], [data-component="display-options-field"] [type="month"], [data-component="display-options-field"] [type="search"], [data-component="display-options-field"] [type="tel"], [data-component="display-options-field"] [type="time"], [data-component="display-options-field"] [type="week"], [data-component="display-options-field"] textarea, [data-component="display-options-field"] select {
- padding: .26rem .6rem;
- font-size: .8rem;
- line-height: 1.1rem;
-}
-
[data-component="display-options-field"] label {
cursor: pointer;
color: var(--lookbook-input-text);
font-size: .82rem;
}
-[data-component="display-options-field"] select {
- background-position: right .4rem center;
- background-size: 1.2em 1.2em;
- border-radius: .375rem;
- padding-right: 1.5rem;
+[data-component="embed-code-dropdown"] [data-component="code"] {
+ padding: 0;
}
+[data-component="embed-code-dropdown"] pre.code.highlight {
+ white-space: normal;
+ padding: 0;
+ font-size: 11px;
+ overflow: hidden;
+}
+
[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-duration: .15s;
@@ -1718,10 +1714,19 @@
input[type="color"]::-webkit-color-swatch {
border-width: 0;
border-radius: .5rem;
}
+select.compact {
+ background-position: right .4rem center;
+ background-size: 1.2em 1.2em;
+ border-radius: .375rem;
+ padding: .26rem 1.5rem .26rem .6rem;
+ font-size: .8rem;
+ line-height: 1.1rem;
+}
+
.pointer-events-none {
pointer-events: none;
}
.visible {
@@ -1746,180 +1751,196 @@
.sticky {
position: sticky;
}
-.-inset-px {
- inset: -1px;
-}
-
.inset-0 {
inset: 0;
}
-.-bottom-px {
- bottom: -1px;
+.-inset-px {
+ inset: -1px;
}
-.-left-px {
- left: -1px;
+.top-0 {
+ top: 0;
}
-.-top-px {
- top: -1px;
+.right-0 {
+ right: 0;
}
.bottom-0 {
bottom: 0;
}
-.right-0 {
- right: 0;
+.top-\[40px\] {
+ top: 40px;
}
+.top-\[39px\] {
+ top: 39px;
+}
+
+.top-1\/2 {
+ top: 50%;
+}
+
.right-3 {
right: .75rem;
}
.right-\[18px\] {
right: 18px;
}
-.top-0 {
- top: 0;
+.-top-px {
+ top: -1px;
}
-.top-1\/2 {
- top: 50%;
+.-left-px {
+ left: -1px;
}
+.top-\[-1px\] {
+ top: -1px;
+}
+
.top-\[2px\] {
top: 2px;
}
-.top-\[39px\] {
- top: 39px;
+.-bottom-px {
+ bottom: -1px;
}
-.top-\[40px\] {
- top: 40px;
+.z-50 {
+ z-index: 50;
}
+.z-\[-1\] {
+ z-index: -1;
+}
+
.\!z-40 {
z-index: 40 !important;
}
-.z-0 {
- z-index: 0;
-}
-
.z-10 {
z-index: 10;
}
-.z-50 {
- z-index: 50;
+.z-0 {
+ z-index: 0;
}
-.z-\[-1\] {
- z-index: -1;
+.mx-auto {
+ margin-left: auto;
+ margin-right: auto;
}
.mx-8 {
margin-left: 2rem;
margin-right: 2rem;
}
-.mx-auto {
- margin-left: auto;
- margin-right: auto;
+.mt-3 {
+ margin-top: .75rem;
}
-.-ml-3 {
- margin-left: -.75rem;
+.mt-2 {
+ margin-top: .5rem;
}
+.mb-8 {
+ margin-bottom: 2rem;
+}
+
.mb-2 {
margin-bottom: .5rem;
}
-.mb-4 {
- margin-bottom: 1rem;
+.mt-8 {
+ margin-top: 2rem;
}
-.mb-6 {
- margin-bottom: 1.5rem;
+.mt-6 {
+ margin-top: 1.5rem;
}
-.mb-8 {
- margin-bottom: 2rem;
+.mt-12 {
+ margin-top: 3rem;
}
-.mb-\[-2px\] {
- margin-bottom: -2px;
-}
-
.ml-2 {
margin-left: .5rem;
}
.ml-auto {
margin-left: auto;
}
-.mr-0 {
- margin-right: 0;
+.mr-2 {
+ margin-right: .5rem;
}
-.mr-0\.5 {
- margin-right: .125rem;
+.mb-4 {
+ margin-bottom: 1rem;
}
.mr-1 {
margin-right: .25rem;
}
-.mr-1\.5 {
- margin-right: .375rem;
+.mr-6 {
+ margin-right: 1.5rem;
}
-.mr-2 {
- margin-right: .5rem;
+.mb-3 {
+ margin-bottom: .75rem;
}
-.mr-6 {
- margin-right: 1.5rem;
+.mt-\[-2px\] {
+ margin-top: -2px;
}
-.mr-auto {
- margin-right: auto;
+.-mt-px {
+ margin-top: -1px;
}
-.mt-1 {
- margin-top: .25rem;
+.mb-6 {
+ margin-bottom: 1.5rem;
}
-.mt-12 {
- margin-top: 3rem;
+.-ml-3 {
+ margin-left: -.75rem;
}
-.mt-2 {
- margin-top: .5rem;
+.mr-auto {
+ margin-right: auto;
}
-.mt-3 {
- margin-top: .75rem;
+.\!ml-2 {
+ margin-left: .5rem !important;
}
-.mt-6 {
- margin-top: 1.5rem;
+.mb-\[-2px\] {
+ margin-bottom: -2px;
}
-.mt-8 {
- margin-top: 2rem;
+.mr-1\.5 {
+ margin-right: .375rem;
}
+.mr-0\.5 {
+ margin-right: .125rem;
+}
+
+.mr-0 {
+ margin-right: 0;
+}
+
.\!block {
display: block !important;
}
.block {
@@ -1956,132 +1977,128 @@
.hidden {
display: none;
}
-.\!h-auto {
- height: auto !important;
+.h-screen {
+ height: 100vh;
}
-.h-10 {
- height: 2.5rem;
+.h-full {
+ height: 100%;
}
-.h-3 {
- height: .75rem;
+.h-\[calc\(100\%_-_40px\)\] {
+ height: calc(100% - 40px);
}
-.h-3\.5 {
- height: .875rem;
+.h-\[calc\(100vh_-_2\.5rem\)\] {
+ height: calc(100vh - 2.5rem);
}
-.h-4 {
- height: 1rem;
+.h-\[calc\(100vh_-_40px\)\] {
+ height: calc(100vh - 40px);
}
-.h-5 {
- height: 1.25rem;
-}
-
.h-6 {
height: 1.5rem;
}
-.h-\[9px\] {
- height: 9px;
+.h-5 {
+ height: 1.25rem;
}
-.h-\[calc\(100\%_-_40px\)\] {
- height: calc(100% - 40px);
+.h-3\.5 {
+ height: .875rem;
}
-.h-\[calc\(100vh_-_2\.5rem\)\] {
- height: calc(100vh - 2.5rem);
+.h-3 {
+ height: .75rem;
}
-.h-\[calc\(100vh_-_40px\)\] {
- height: calc(100vh - 40px);
+.h-\[9px\] {
+ height: 9px;
}
-.h-full {
- height: 100%;
+.h-10 {
+ height: 2.5rem;
}
-.h-screen {
- height: 100vh;
+.h-4 {
+ height: 1rem;
}
.max-h-full {
max-height: 100%;
}
.min-h-0 {
min-height: 0;
}
-.w-11 {
- width: 2.75rem;
+.w-full {
+ width: 100%;
}
-.w-3 {
- width: .75rem;
+.w-\[140px\] {
+ width: 140px;
}
-.w-3\.5 {
- width: .875rem;
+.w-screen {
+ width: 100vw;
}
-.w-4 {
- width: 1rem;
+.w-11 {
+ width: 2.75rem;
}
.w-5 {
width: 1.25rem;
}
-.w-\[140px\] {
- width: 140px;
+.w-\[320px\] {
+ width: 320px;
}
-.w-\[9px\] {
- width: 9px;
+.w-3\.5 {
+ width: .875rem;
}
-.w-full {
- width: 100%;
+.w-3 {
+ width: .75rem;
}
-.w-screen {
- width: 100vw;
+.w-\[9px\] {
+ width: 9px;
}
-.min-w-0 {
- min-width: 0;
+.w-4 {
+ width: 1rem;
}
.min-w-\[180px\] {
min-width: 180px;
}
-.max-w-\[420px\] {
- max-width: 420px;
+.min-w-0 {
+ min-width: 0;
}
-.max-w-none {
- max-width: none;
+.max-w-sm {
+ max-width: 24rem;
}
.max-w-screen-lg {
max-width: 1024px;
}
-.max-w-sm {
- max-width: 24rem;
+.max-w-\[420px\] {
+ max-width: 420px;
}
-.max-w-xs {
- max-width: 20rem;
+.max-w-none {
+ max-width: none;
}
.flex-none {
flex: none;
}
@@ -2092,47 +2109,47 @@
.border-collapse {
border-collapse: collapse;
}
-.-translate-x-1\/2 {
- --tw-translate-x: -50%;
+.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));
}
-.-translate-y-1\/2 {
- --tw-translate-y: -50%;
+.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));
}
-.translate-x-0 {
- --tw-translate-x: 0px;
+.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));
}
-.translate-x-5 {
- --tw-translate-x: 1.25rem;
+.-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));
}
-.translate-x-full {
- --tw-translate-x: 100%;
+.-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));
}
.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));
}
-.rotate-45 {
- --tw-rotate: 45deg;
+.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));
}
-.rotate-90 {
- --tw-rotate: 90deg;
+.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));
}
@keyframes spin {
to {
@@ -2142,38 +2159,42 @@
.animate-spin {
animation: 1s linear infinite spin;
}
+.\!cursor-not-allowed {
+ cursor: not-allowed !important;
+}
+
.\!cursor-default {
cursor: default !important;
}
-.cursor-\[col-resize\] {
- cursor: col-resize;
+.cursor-pointer {
+ cursor: pointer;
}
.cursor-\[not-allowed\] {
cursor: not-allowed;
}
-.cursor-\[nwse-resize\] {
- cursor: nwse-resize;
+.cursor-\[col-resize\] {
+ cursor: col-resize;
}
.cursor-\[row-resize\] {
cursor: row-resize;
}
+.cursor-\[nwse-resize\] {
+ cursor: nwse-resize;
+}
+
.cursor-help {
cursor: help;
}
-.cursor-pointer {
- cursor: pointer;
-}
-
.select-none {
-webkit-user-select: none;
user-select: none;
}
@@ -2191,22 +2212,22 @@
.grid-cols-\[1fr_17px\] {
grid-template-columns: 1fr 17px;
}
+.grid-rows-\[40px_1fr\] {
+ grid-template-rows: 40px 1fr;
+}
+
.\!grid-rows-\[1fr\] {
grid-template-rows: 1fr !important;
}
.grid-rows-\[1fr_17px\] {
grid-template-rows: 1fr 17px;
}
-.grid-rows-\[40px_1fr\] {
- grid-template-rows: 40px 1fr;
-}
-
.flex-col {
flex-direction: column;
}
.items-center {
@@ -2223,52 +2244,52 @@
.justify-between {
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)));
+.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));
}
-.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
- --tw-space-x-reverse: 0;
- margin-right: calc(.375rem * var(--tw-space-x-reverse));
- margin-left: calc(.375rem * calc(1 - var(--tw-space-x-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)));
}
-.space-x-3 > :not([hidden]) ~ :not([hidden]) {
+.space-x-1 > :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(.25rem * var(--tw-space-x-reverse));
+ margin-left: calc(.25rem * 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)));
}
-.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));
+.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)));
}
.space-y-3 > :not([hidden]) ~ :not([hidden]) {
--tw-space-y-reverse: 0;
margin-top: calc(.75rem * calc(1 - var(--tw-space-y-reverse)));
margin-bottom: calc(.75rem * var(--tw-space-y-reverse));
}
+.space-x-1\.5 > :not([hidden]) ~ :not([hidden]) {
+ --tw-space-x-reverse: 0;
+ margin-right: calc(.375rem * var(--tw-space-x-reverse));
+ margin-left: calc(.375rem * 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));
}
@@ -2325,14 +2346,10 @@
.rounded-md {
border-radius: .375rem;
}
-.rounded-sm {
- border-radius: .125rem;
-}
-
.rounded-bl-md {
border-bottom-left-radius: .375rem;
}
.rounded-tl-sm {
@@ -2345,288 +2362,297 @@
.border-2 {
border-width: 2px;
}
+.border-t {
+ border-top-width: 1px;
+}
+
.border-b {
border-bottom-width: 1px;
}
-.border-b-0 {
- border-bottom-width: 0;
-}
-
-.border-b-2 {
- border-bottom-width: 2px;
-}
-
.border-l {
border-left-width: 1px;
}
-.border-l-2 {
- border-left-width: 2px;
-}
-
.border-r {
border-right-width: 1px;
}
-.border-t {
- border-top-width: 1px;
+.border-b-0 {
+ border-bottom-width: 0;
}
-.border-t-0 {
- border-top-width: 0;
+.border-l-2 {
+ border-left-width: 2px;
}
-.border-dashed {
- border-style: dashed;
+.border-b-2 {
+ border-bottom-width: 2px;
}
-.\!border-lookbook-header-border {
- border-color: var(--lookbook-header-border) !important;
+.border-red-200 {
+ --tw-border-opacity: 1;
+ border-color: rgb(254 202 202 / var(--tw-border-opacity));
}
-.border-gray-200 {
- --tw-border-opacity: 1;
- border-color: rgb(229 231 235 / 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-lookbook-divider {
- border-color: var(--lookbook-divider);
+.border-transparent {
+ border-color: #0000;
}
+.border-lookbook-dropdown-divider {
+ border-color: var(--lookbook-dropdown-divider);
+}
+
+.\!border-lookbook-header-border {
+ border-color: var(--lookbook-header-border) !important;
+}
+
.border-lookbook-tabs-border-active {
border-color: var(--lookbook-tabs-border-active);
}
-.border-red-200 {
- --tw-border-opacity: 1;
- border-color: rgb(254 202 202 / var(--tw-border-opacity));
+.bg-white {
+ --tw-bg-opacity: 1;
+ background-color: rgb(255 255 255 / var(--tw-bg-opacity));
}
-.border-transparent {
- border-color: #0000;
+.bg-red-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 242 242 / var(--tw-bg-opacity));
}
-.\!bg-lookbook-header-bg {
- background-color: var(--lookbook-header-bg) !important;
+.bg-red-100 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(254 226 226 / var(--tw-bg-opacity));
}
-.\!bg-lookbook-nav-item-active {
- background-color: var(--lookbook-nav-item-active) !important;
+.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));
}
-.bg-gray-100\/80 {
- background-color: #f3f4f6cc;
+.bg-lookbook-drawer-bg {
+ background-color: var(--lookbook-drawer-bg);
}
-.bg-lookbook-divider {
- background-color: var(--lookbook-divider);
+.bg-lookbook-page-bg {
+ background-color: var(--lookbook-page-bg);
}
-.bg-lookbook-drawer-bg {
- background-color: var(--lookbook-drawer-bg);
+.bg-transparent {
+ background-color: #0000;
}
+.bg-lookbook-input-toggle-active {
+ background-color: var(--lookbook-input-toggle-active);
+}
+
.bg-lookbook-input-toggle {
background-color: var(--lookbook-input-toggle);
}
-.bg-lookbook-input-toggle-active {
- background-color: var(--lookbook-input-toggle-active);
+.bg-lookbook-prose-bg {
+ background-color: var(--lookbook-prose-bg);
}
-.bg-lookbook-page-bg {
- background-color: var(--lookbook-page-bg);
+.bg-zinc-50 {
+ --tw-bg-opacity: 1;
+ background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}
-.bg-lookbook-params-editor-bg {
- background-color: var(--lookbook-params-editor-bg);
+.\!bg-lookbook-header-bg {
+ background-color: var(--lookbook-header-bg) !important;
}
-.bg-lookbook-prose-bg {
- background-color: var(--lookbook-prose-bg);
+.bg-lookbook-divider {
+ background-color: var(--lookbook-divider);
}
-.bg-lookbook-sidebar-bg {
- background-color: var(--lookbook-sidebar-bg);
+.bg-lookbook-button-bg {
+ background-color: var(--lookbook-button-bg);
}
+.bg-lookbook-button-bg-hover {
+ background-color: var(--lookbook-button-bg-hover);
+}
+
.bg-lookbook-toolbar-bg {
background-color: var(--lookbook-toolbar-bg);
}
-.bg-red-100 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 226 226 / var(--tw-bg-opacity));
+.bg-gray-100\/80 {
+ background-color: #f3f4f6cc;
}
-.bg-red-50 {
- --tw-bg-opacity: 1;
- background-color: rgb(254 242 242 / var(--tw-bg-opacity));
+.\!bg-lookbook-nav-item-active {
+ background-color: var(--lookbook-nav-item-active) !important;
}
-.bg-transparent {
- background-color: #0000;
+.bg-lookbook-params-editor-bg {
+ background-color: var(--lookbook-params-editor-bg);
}
-.bg-white {
- --tw-bg-opacity: 1;
- background-color: rgb(255 255 255 / var(--tw-bg-opacity));
+.p-4 {
+ padding: 1rem;
}
-.bg-zinc-50 {
- --tw-bg-opacity: 1;
- background-color: rgb(250 250 250 / var(--tw-bg-opacity));
+.p-3 {
+ padding: .75rem;
}
.p-1 {
padding: .25rem;
}
.p-2 {
padding: .5rem;
}
-.p-3 {
- padding: .75rem;
+.px-4 {
+ padding-left: 1rem;
+ padding-right: 1rem;
}
-.p-4 {
- padding: 1rem;
+.py-6 {
+ padding-top: 1.5rem;
+ padding-bottom: 1.5rem;
}
-.p-6 {
- padding: 1.5rem;
+.px-8 {
+ padding-left: 2rem;
+ padding-right: 2rem;
}
-.p-8 {
- padding: 2rem;
+.py-2 {
+ padding-top: .5rem;
+ padding-bottom: .5rem;
}
-.px-1 {
- padding-left: .25rem;
- padding-right: .25rem;
-}
-
.px-2 {
padding-left: .5rem;
padding-right: .5rem;
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem;
}
-.px-4 {
- padding-left: 1rem;
- padding-right: 1rem;
+.py-3 {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
}
-.px-8 {
- padding-left: 2rem;
- padding-right: 2rem;
+.py-1\.5 {
+ padding-top: .375rem;
+ padding-bottom: .375rem;
}
-.py-2 {
- padding-top: .5rem;
- padding-bottom: .5rem;
+.py-1 {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
}
-.py-3 {
- padding-top: .75rem;
- padding-bottom: .75rem;
+.px-1 {
+ padding-left: .25rem;
+ padding-right: .25rem;
}
-.py-6 {
- padding-top: 1.5rem;
- padding-bottom: 1.5rem;
+.pb-10 {
+ padding-bottom: 2.5rem;
}
-.pb-0 {
- padding-bottom: 0;
+.pb-4 {
+ padding-bottom: 1rem;
}
-.pb-1 {
- padding-bottom: .25rem;
+.pt-1 {
+ padding-top: .25rem;
}
-.pb-1\.5 {
- padding-bottom: .375rem;
+.pr-0 {
+ padding-right: 0;
}
-.pb-10 {
- padding-bottom: 2.5rem;
+.pl-1 {
+ padding-left: .25rem;
}
-.pb-12 {
- padding-bottom: 3rem;
+.pb-1 {
+ padding-bottom: .25rem;
}
-.pb-4 {
- padding-bottom: 1rem;
+.pr-0\.5 {
+ padding-right: .125rem;
}
+.pl-0\.5 {
+ padding-left: .125rem;
+}
+
.pl-0 {
padding-left: 0;
}
-.pl-0\.5 {
- padding-left: .125rem;
+.pt-8 {
+ padding-top: 2rem;
}
-.pl-1 {
- padding-left: .25rem;
+.pb-12 {
+ padding-bottom: 3rem;
}
-.pl-2 {
- padding-left: .5rem;
+.pt-2 {
+ padding-top: .5rem;
}
-.pr-0 {
- padding-right: 0;
+.pt-3 {
+ padding-top: .75rem;
}
-.pr-0\.5 {
- padding-right: .125rem;
+.pb-3 {
+ padding-bottom: .75rem;
}
+.pb-0 {
+ padding-bottom: 0;
+}
+
.pr-1 {
padding-right: .25rem;
}
-.pt-1 {
- padding-top: .25rem;
+.pl-2 {
+ padding-left: .5rem;
}
.pt-1\.5 {
padding-top: .375rem;
}
-.pt-2 {
- padding-top: .5rem;
-}
-
.pt-2\.5 {
padding-top: .625rem;
}
-.pt-8 {
- padding-top: 2rem;
+.pb-1\.5 {
+ padding-bottom: .375rem;
}
.text-left {
text-align: left;
}
@@ -2646,15 +2672,10 @@
.text-base {
font-size: 1rem;
line-height: 1.5rem;
}
-.text-lg {
- font-size: 1.125rem;
- line-height: 1.75rem;
-}
-
.text-sm {
font-size: .875rem;
line-height: 1.25rem;
}
@@ -2666,18 +2687,27 @@
.text-xs {
font-size: .75rem;
line-height: 1rem;
}
-.font-black {
- font-weight: 900;
+.text-\[11px\] {
+ font-size: 11px;
}
+.text-lg {
+ font-size: 1.125rem;
+ line-height: 1.75rem;
+}
+
.font-bold {
font-weight: 700;
}
+.font-black {
+ font-weight: 900;
+}
+
.uppercase {
text-transform: uppercase;
}
.italic {
@@ -2698,130 +2728,143 @@
.tracking-wider {
letter-spacing: .05em;
}
-.\!text-lookbook-header-text {
- color: var(--lookbook-header-text) !important;
+.text-red-300 {
+ --tw-text-opacity: 1;
+ color: rgb(252 165 165 / var(--tw-text-opacity));
}
-.\!text-lookbook-tabs-text-disabled {
- color: var(--lookbook-tabs-text-disabled) !important;
+.text-red-700 {
+ --tw-text-opacity: 1;
+ 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));
+}
+
.text-gray-400 {
--tw-text-opacity: 1;
color: rgb(156 163 175 / var(--tw-text-opacity));
}
+.text-lookbook-blank-slate-title {
+ color: var(--lookbook-blank-slate-title);
+}
+
.text-green-500 {
--tw-text-opacity: 1;
color: rgb(34 197 94 / var(--tw-text-opacity));
}
.text-green-600 {
--tw-text-opacity: 1;
color: rgb(22 163 74 / var(--tw-text-opacity));
}
-.text-lookbook-blank-slate-title {
- color: var(--lookbook-blank-slate-title);
+.text-gray-600 {
+ --tw-text-opacity: 1;
+ color: rgb(75 85 99 / var(--tw-text-opacity));
}
+.text-lookbook-icon-button-stroke {
+ color: var(--lookbook-icon-button-stroke);
+}
+
+.\!text-lookbook-header-text {
+ color: var(--lookbook-header-text) !important;
+}
+
.text-lookbook-branding-text {
color: var(--lookbook-branding-text);
}
.text-lookbook-header-text {
color: var(--lookbook-header-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-lookbook-nav-icon-stroke {
- color: var(--lookbook-nav-icon-stroke);
-}
-
.text-lookbook-prose-text {
color: var(--lookbook-prose-text);
}
-.text-lookbook-tabs-text {
- color: var(--lookbook-tabs-text);
+.text-lookbook-button-text {
+ color: var(--lookbook-button-text);
}
-.text-lookbook-tabs-text-hover {
- color: var(--lookbook-tabs-text-hover);
+.text-lookbook-embed-title {
+ color: var(--lookbook-embed-title);
}
-.text-red-300 {
- --tw-text-opacity: 1;
- color: rgb(252 165 165 / var(--tw-text-opacity));
+.text-lookbook-nav-icon-stroke {
+ color: var(--lookbook-nav-icon-stroke);
}
-.text-red-700 {
- --tw-text-opacity: 1;
- color: rgb(185 28 28 / var(--tw-text-opacity));
+.text-lookbook-tabs-text {
+ color: var(--lookbook-tabs-text);
}
-.text-red-900 {
- --tw-text-opacity: 1;
- color: rgb(127 29 29 / var(--tw-text-opacity));
+.text-lookbook-tabs-text-hover {
+ color: var(--lookbook-tabs-text-hover);
}
+.\!text-lookbook-tabs-text-disabled {
+ color: var(--lookbook-tabs-text-disabled) !important;
+}
+
.underline {
text-decoration-line: underline;
}
-.\!opacity-100 {
- opacity: 1 !important;
+.opacity-50 {
+ opacity: .5;
}
-.\!opacity-30 {
- opacity: .3 !important;
+.opacity-60 {
+ opacity: .6;
}
.opacity-0 {
opacity: 0;
}
-.opacity-25 {
- opacity: .25;
+.\!opacity-30 {
+ opacity: .3 !important;
}
+.opacity-90 {
+ opacity: .9;
+}
+
.opacity-40 {
opacity: .4;
}
-.opacity-50 {
- opacity: .5;
+.opacity-80 {
+ opacity: .8;
}
-.opacity-60 {
- opacity: .6;
-}
-
.opacity-70 {
opacity: .7;
}
-.opacity-75 {
- opacity: .75;
+.\!opacity-100 {
+ opacity: 1 !important;
}
-.opacity-80 {
- opacity: .8;
+.opacity-25 {
+ opacity: .25;
}
-.opacity-90 {
- opacity: .9;
+.opacity-75 {
+ opacity: .75;
}
.shadow {
--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);
@@ -2841,30 +2884,36 @@
.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-colors {
+ 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 {
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-all {
- transition-property: all;
+.transition-opacity {
+ transition-property: opacity;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
-.transition-colors {
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+.transition-all {
+ transition-property: all;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
-.transition-opacity {
- transition-property: opacity;
+.transition-\[height\] {
+ transition-property: height;
transition-duration: .15s;
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.duration-100 {
@@ -2873,10 +2922,14 @@
.duration-200 {
transition-duration: .2s;
}
+.duration-150 {
+ transition-duration: .15s;
+}
+
.ease-in-out {
transition-timing-function: cubic-bezier(.4, 0, .2, 1);
}
.tippy-box[data-animation="fade"][data-state="hidden"] {
@@ -3051,40 +3104,39 @@
.tippy-box[data-theme~="tooltip"][data-placement^="right"] > .tippy-arrow:before {
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));
- --tw-text-opacity: 1;
- 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;
+ border: 1px solid var(--lookbook-dropdown-divider);
+ color: var(--lookbook-dropdown-text);
+ background: var(--lookbook-dropdown-bg);
+ max-width: none !important;
}
.tippy-box[data-theme~="menu"] > .tippy-content {
border-radius: .25rem;
padding: 0;
overflow: hidden;
}
.tippy-box[data-theme~="menu"][data-placement^="top"] > .tippy-arrow:before {
- border-top-color: #fff;
+ border-top-color: var(--lookbook-dropdown-bg);
}
.tippy-box[data-theme~="menu"][data-placement^="bottom"] > .tippy-arrow:before {
- border-bottom-color: #fff;
+ border-bottom-color: var(--lookbook-dropdown-bg);
}
.tippy-box[data-theme~="menu"][data-placement^="left"] > .tippy-arrow:before {
- border-left-color: #fff;
+ border-left-color: var(--lookbook-dropdown-bg);
}
.tippy-box[data-theme~="menu"][data-placement^="right"] > .tippy-arrow:before {
- border-right-color: #fff;
+ border-right-color: var(--lookbook-dropdown-bg);
}
.theme-github {
--dark-bg: #111;
--dark-gray-1: #404040;
@@ -3482,10 +3534,14 @@
.hover\:bg-lookbook-draggable-hint:hover {
background-color: var(--lookbook-draggable-hint);
}
+.hover\:bg-lookbook-button-bg-hover:hover {
+ background-color: var(--lookbook-button-bg-hover);
+}
+
.hover\:text-gray-900:hover {
--tw-text-opacity: 1;
color: rgb(17 24 39 / var(--tw-text-opacity));
}
@@ -3513,18 +3569,18 @@
.focus\:outline-none:focus {
outline-offset: 2px;
outline: 2px solid #0000;
}
-.focus\:ring-0:focus {
+.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(0px + 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-2:focus {
+.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(2px + 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-offset-2:focus {
--tw-ring-offset-width: 2px;