public/lookbook-assets/css/lookbook.css in lookbook-1.5.2 vs public/lookbook-assets/css/lookbook.css in lookbook-1.5.3

- old
+ new

@@ -25,20 +25,22 @@ 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; @@ -369,11 +371,11 @@ ::-webkit-scrollbar-thumb { background-color: var(--lookbook-scrollbar); background-clip: content-box; border-radius: 9999px; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke; + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } ::-webkit-scrollbar-thumb:hover { @@ -1421,11 +1423,11 @@ } [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, outline-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; } @@ -1451,11 +1453,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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; + 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-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); display: flex; } @@ -1616,11 +1618,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, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter, backdrop-filter; + 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-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } [data-component="viewport"] .resize-handle:hover { @@ -1744,74 +1746,66 @@ .sticky { position: sticky; } +.-inset-px { + inset: -1px; +} + .inset-0 { inset: 0; } -.-inset-px { - inset: -1px; +.-bottom-px { + bottom: -1px; } -.top-0 { - top: 0; +.-left-px { + left: -1px; } -.right-0 { - right: 0; +.-top-px { + top: -1px; } .bottom-0 { bottom: 0; } -.top-\[40px\] { - top: 40px; +.right-0 { + right: 0; } -.top-\[39px\] { - top: 39px; -} - -.top-1\/2 { - top: 50%; -} - .right-3 { right: .75rem; } .right-\[18px\] { right: 18px; } -.-top-px { - top: -1px; +.top-0 { + top: 0; } -.-left-px { - left: -1px; +.top-1\/2 { + top: 50%; } .top-\[2px\] { top: 2px; } -.-bottom-px { - bottom: -1px; +.top-\[39px\] { + top: 39px; } -.z-50 { - z-index: 50; +.top-\[40px\] { + top: 40px; } -.z-\[-1\] { - z-index: -1; -} - .\!z-40 { z-index: 40 !important; } .z-0 { @@ -1820,112 +1814,120 @@ .z-10 { z-index: 10; } -.mx-auto { - margin-left: auto; - margin-right: auto; +.z-50 { + z-index: 50; } +.z-\[-1\] { + z-index: -1; +} + .mx-8 { margin-left: 2rem; margin-right: 2rem; } -.mt-3 { - margin-top: .75rem; +.mx-auto { + margin-left: auto; + margin-right: auto; } -.mt-2 { - margin-top: .5rem; +.-ml-3 { + margin-left: -.75rem; } -.mb-8 { - margin-bottom: 2rem; -} - .mb-2 { margin-bottom: .5rem; } -.mt-8 { - margin-top: 2rem; +.mb-4 { + margin-bottom: 1rem; } -.mt-6 { - margin-top: 1.5rem; +.mb-6 { + margin-bottom: 1.5rem; } -.mt-12 { - margin-top: 3rem; +.mb-8 { + margin-bottom: 2rem; } +.mb-\[-2px\] { + margin-bottom: -2px; +} + .ml-2 { margin-left: .5rem; } .ml-auto { margin-left: auto; } -.mr-2 { - margin-right: .5rem; +.mr-0 { + margin-right: 0; } -.mb-4 { - margin-bottom: 1rem; +.mr-0\.5 { + margin-right: .125rem; } .mr-1 { margin-right: .25rem; } +.mr-1\.5 { + margin-right: .375rem; +} + +.mr-2 { + margin-right: .5rem; +} + .mr-6 { margin-right: 1.5rem; } -.mb-\[-2px\] { - margin-bottom: -2px; +.mr-auto { + margin-right: auto; } .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; } -.mr-1\.5 { - margin-right: .375rem; +.mt-6 { + margin-top: 1.5rem; } -.mr-0\.5 { - margin-right: .125rem; +.mt-8 { + margin-top: 2rem; } -.mr-0 { - margin-right: 0; +.\!block { + display: block !important; } .block { display: block; } -.\!block { - display: block !important; -} - .inline-block { display: inline-block; } .inline { @@ -1954,130 +1956,130 @@ .hidden { display: none; } -.h-screen { - height: 100vh; +.\!h-auto { + height: auto !important; } -.h-full { - height: 100%; +.h-10 { + height: 2.5rem; } -.h-\[calc\(100\%_-_40px\)\] { - height: calc(100% - 40px); +.h-3 { + height: .75rem; } -.h-\[calc\(100vh_-_2\.5rem\)\] { - height: calc(100vh - 2.5rem); +.h-3\.5 { + height: .875rem; } -.h-\[calc\(100vh_-_40px\)\] { - height: calc(100vh - 40px); +.h-4 { + height: 1rem; } -.h-6 { - height: 1.5rem; -} - .h-5 { height: 1.25rem; } -.h-3\.5 { - height: .875rem; +.h-6 { + height: 1.5rem; } -.h-3 { - height: .75rem; -} - .h-\[9px\] { height: 9px; } -.h-10 { - height: 2.5rem; +.h-\[calc\(100\%_-_40px\)\] { + height: calc(100% - 40px); } -.h-4 { - height: 1rem; +.h-\[calc\(100vh_-_2\.5rem\)\] { + height: calc(100vh - 2.5rem); } -.\!h-auto { - height: auto !important; +.h-\[calc\(100vh_-_40px\)\] { + height: calc(100vh - 40px); } +.h-full { + height: 100%; +} + +.h-screen { + height: 100vh; +} + .max-h-full { max-height: 100%; } .min-h-0 { min-height: 0; } -.w-full { - width: 100%; +.w-11 { + width: 2.75rem; } -.w-\[140px\] { - width: 140px; +.w-3 { + width: .75rem; } -.w-screen { - width: 100vw; +.w-3\.5 { + width: .875rem; } -.w-11 { - width: 2.75rem; +.w-4 { + width: 1rem; } .w-5 { width: 1.25rem; } -.w-3\.5 { - width: .875rem; +.w-\[140px\] { + width: 140px; } -.w-3 { - width: .75rem; -} - .w-\[9px\] { width: 9px; } -.w-4 { - width: 1rem; +.w-full { + width: 100%; } -.min-w-\[180px\] { - min-width: 180px; +.w-screen { + width: 100vw; } .min-w-0 { min-width: 0; } -.max-w-sm { - max-width: 24rem; +.min-w-\[180px\] { + min-width: 180px; } -.max-w-screen-lg { - max-width: 1024px; -} - .max-w-\[420px\] { max-width: 420px; } .max-w-none { max-width: none; } +.max-w-screen-lg { + max-width: 1024px; +} + +.max-w-sm { + max-width: 24rem; +} + .max-w-xs { max-width: 20rem; } .flex-none { @@ -2090,47 +2092,47 @@ .border-collapse { border-collapse: collapse; } -.translate-x-0 { - --tw-translate-x: 0px; +.-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)); } -.translate-x-full { - --tw-translate-x: 100%; +.-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-5 { - --tw-translate-x: 1.25rem; +.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-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-1\/2 { - --tw-translate-x: -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)); } .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-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)); } -.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)); } @keyframes spin { to { @@ -2144,34 +2146,34 @@ .\!cursor-default { cursor: default !important; } -.cursor-pointer { - cursor: pointer; +.cursor-\[col-resize\] { + cursor: col-resize; } .cursor-\[not-allowed\] { cursor: not-allowed; } -.cursor-\[col-resize\] { - cursor: col-resize; +.cursor-\[nwse-resize\] { + cursor: nwse-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; } @@ -2189,22 +2191,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 { @@ -2221,52 +2223,52 @@ .justify-between { justify-content: space-between; } -.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 > :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-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-1 > :not([hidden]) ~ :not([hidden]) { +.space-x-3 > :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(.75rem * var(--tw-space-x-reverse)); + margin-left: calc(.75rem * 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-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-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-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)); } @@ -2319,18 +2321,18 @@ .rounded-full { border-radius: 9999px; } -.rounded-sm { - border-radius: .125rem; -} - .rounded-md { border-radius: .375rem; } +.rounded-sm { + border-radius: .125rem; +} + .rounded-bl-md { border-bottom-left-radius: .375rem; } .rounded-tl-sm { @@ -2343,288 +2345,288 @@ .border-2 { border-width: 2px; } -.border-t { - border-top-width: 1px; -} - .border-b { border-bottom-width: 1px; } -.border-l { - border-left-width: 1px; -} - .border-b-0 { border-bottom-width: 0; } -.border-r { - border-right-width: 1px; +.border-b-2 { + border-bottom-width: 2px; } +.border-l { + border-left-width: 1px; +} + .border-l-2 { border-left-width: 2px; } -.border-b-2 { - border-bottom-width: 2px; +.border-r { + border-right-width: 1px; } +.border-t { + border-top-width: 1px; +} + .border-t-0 { border-top-width: 0; } .border-dashed { border-style: dashed; } -.border-red-200 { - --tw-border-opacity: 1; - border-color: rgb(254 202 202 / var(--tw-border-opacity)); +.\!border-lookbook-header-border { + border-color: var(--lookbook-header-border) !important; } -.border-lookbook-divider { - border-color: var(--lookbook-divider); +.border-gray-200 { + --tw-border-opacity: 1; + border-color: rgb(229 231 235 / var(--tw-border-opacity)); } .border-gray-300 { --tw-border-opacity: 1; border-color: rgb(209 213 219 / var(--tw-border-opacity)); } -.border-transparent { - border-color: #0000; +.border-lookbook-divider { + border-color: var(--lookbook-divider); } -.border-gray-200 { - --tw-border-opacity: 1; - border-color: rgb(229 231 235 / var(--tw-border-opacity)); -} - -.\!border-lookbook-header-border { - border-color: var(--lookbook-header-border) !important; -} - .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)); +.border-red-200 { + --tw-border-opacity: 1; + border-color: rgb(254 202 202 / var(--tw-border-opacity)); } -.bg-red-50 { - --tw-bg-opacity: 1; - background-color: rgb(254 242 242 / var(--tw-bg-opacity)); +.border-transparent { + border-color: #0000; } -.bg-red-100 { - --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity)); +.\!bg-lookbook-header-bg { + background-color: var(--lookbook-header-bg) !important; } -.bg-lookbook-sidebar-bg { - background-color: var(--lookbook-sidebar-bg); +.\!bg-lookbook-nav-item-active { + background-color: var(--lookbook-nav-item-active) !important; } .bg-black { --tw-bg-opacity: 1; background-color: rgb(0 0 0 / var(--tw-bg-opacity)); } -.bg-lookbook-page-bg { - background-color: var(--lookbook-page-bg); +.bg-gray-100\/80 { + background-color: #f3f4f6cc; } -.bg-transparent { - background-color: #0000; +.bg-lookbook-divider { + background-color: var(--lookbook-divider); } .bg-lookbook-drawer-bg { background-color: var(--lookbook-drawer-bg); } -.bg-lookbook-input-toggle-active { - background-color: var(--lookbook-input-toggle-active); -} - .bg-lookbook-input-toggle { background-color: var(--lookbook-input-toggle); } -.bg-lookbook-prose-bg { - background-color: var(--lookbook-prose-bg); +.bg-lookbook-input-toggle-active { + background-color: var(--lookbook-input-toggle-active); } -.bg-zinc-50 { - --tw-bg-opacity: 1; - background-color: rgb(250 250 250 / var(--tw-bg-opacity)); +.bg-lookbook-page-bg { + background-color: var(--lookbook-page-bg); } -.\!bg-lookbook-header-bg { - background-color: var(--lookbook-header-bg) !important; +.bg-lookbook-params-editor-bg { + background-color: var(--lookbook-params-editor-bg); } -.bg-lookbook-divider { - background-color: var(--lookbook-divider); +.bg-lookbook-prose-bg { + background-color: var(--lookbook-prose-bg); } +.bg-lookbook-sidebar-bg { + background-color: var(--lookbook-sidebar-bg); +} + .bg-lookbook-toolbar-bg { background-color: var(--lookbook-toolbar-bg); } -.bg-gray-100\/80 { - background-color: #f3f4f6cc; +.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-red-50 { + --tw-bg-opacity: 1; + background-color: rgb(254 242 242 / var(--tw-bg-opacity)); } -.bg-lookbook-params-editor-bg { - background-color: var(--lookbook-params-editor-bg); +.bg-transparent { + background-color: #0000; } -.p-4 { - padding: 1rem; +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity)); } +.bg-zinc-50 { + --tw-bg-opacity: 1; + background-color: rgb(250 250 250 / var(--tw-bg-opacity)); +} + .p-1 { padding: .25rem; } .p-2 { padding: .5rem; } -.p-6 { - padding: 1.5rem; -} - .p-3 { padding: .75rem; } +.p-4 { + padding: 1rem; +} + +.p-6 { + padding: 1.5rem; +} + .p-8 { padding: 2rem; } +.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-6 { - padding-top: 1.5rem; - padding-bottom: 1.5rem; -} - .px-8 { padding-left: 2rem; padding-right: 2rem; } .py-2 { padding-top: .5rem; padding-bottom: .5rem; } -.px-2 { - padding-left: .5rem; - padding-right: .5rem; -} - -.px-3 { - padding-left: .75rem; - padding-right: .75rem; -} - .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 { + padding-left: 0; } .pl-0\.5 { padding-left: .125rem; } -.pl-0 { - padding-left: 0; +.pl-1 { + padding-left: .25rem; } -.pt-8 { - padding-top: 2rem; +.pl-2 { + padding-left: .5rem; } -.pb-12 { - padding-bottom: 3rem; +.pr-0 { + padding-right: 0; } -.pt-2 { - padding-top: .5rem; +.pr-0\.5 { + padding-right: .125rem; } -.pb-0 { - padding-bottom: 0; -} - .pr-1 { padding-right: .25rem; } -.pl-2 { - padding-left: .5rem; +.pt-1 { + padding-top: .25rem; } .pt-1\.5 { padding-top: .375rem; } +.pt-2 { + padding-top: .5rem; +} + .pt-2\.5 { padding-top: .625rem; } -.pb-1\.5 { - padding-bottom: .375rem; +.pt-8 { + padding-top: 2rem; } .text-left { text-align: left; } @@ -2644,10 +2646,15 @@ .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; } @@ -2659,23 +2666,18 @@ .text-xs { font-size: .75rem; line-height: 1rem; } -.text-lg { - font-size: 1.125rem; - line-height: 1.75rem; +.font-black { + font-weight: 900; } .font-bold { font-weight: 700; } -.font-black { - font-weight: 900; -} - .uppercase { text-transform: uppercase; } .italic { @@ -2696,130 +2698,130 @@ .tracking-wider { letter-spacing: .05em; } -.text-red-300 { - --tw-text-opacity: 1; - color: rgb(252 165 165 / var(--tw-text-opacity)); +.\!text-lookbook-header-text { + color: var(--lookbook-header-text) !important; } -.text-red-700 { - --tw-text-opacity: 1; - color: rgb(185 28 28 / var(--tw-text-opacity)); +.\!text-lookbook-tabs-text-disabled { + color: var(--lookbook-tabs-text-disabled) !important; } -.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-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)); } .text-green-600 { --tw-text-opacity: 1; color: rgb(22 163 74 / var(--tw-text-opacity)); } -.\!text-lookbook-header-text { - color: var(--lookbook-header-text) !important; +.text-lookbook-blank-slate-title { + color: var(--lookbook-blank-slate-title); } .text-lookbook-branding-text { color: var(--lookbook-branding-text); } .text-lookbook-header-text { color: var(--lookbook-header-text); } -.text-lookbook-prose-text { - color: var(--lookbook-prose-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-tabs-text-hover { color: var(--lookbook-tabs-text-hover); } -.\!text-lookbook-tabs-text-disabled { - color: var(--lookbook-tabs-text-disabled) !important; +.text-red-300 { + --tw-text-opacity: 1; + color: rgb(252 165 165 / var(--tw-text-opacity)); } -.underline { - text-decoration-line: underline; +.text-red-700 { + --tw-text-opacity: 1; + color: rgb(185 28 28 / var(--tw-text-opacity)); } -.opacity-50 { - opacity: .5; +.text-red-900 { + --tw-text-opacity: 1; + color: rgb(127 29 29 / var(--tw-text-opacity)); } -.opacity-60 { - opacity: .6; +.underline { + text-decoration-line: underline; } -.opacity-0 { - opacity: 0; +.\!opacity-100 { + opacity: 1 !important; } .\!opacity-30 { opacity: .3 !important; } -.opacity-90 { - opacity: .9; +.opacity-0 { + opacity: 0; } +.opacity-25 { + opacity: .25; +} + .opacity-40 { opacity: .4; } -.opacity-80 { - opacity: .8; +.opacity-50 { + opacity: .5; } +.opacity-60 { + opacity: .6; +} + .opacity-70 { opacity: .7; } -.\!opacity-100 { - opacity: 1 !important; +.opacity-75 { + opacity: .75; } -.opacity-25 { - opacity: .25; +.opacity-80 { + opacity: .8; } -.opacity-75 { - opacity: .75; +.opacity-90 { + opacity: .9; } .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); @@ -2839,30 +2841,30 @@ .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 { + 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-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-all { + transition-property: all; transition-duration: .15s; transition-timing-function: cubic-bezier(.4, 0, .2, 1); } -.transition-opacity { - transition-property: opacity; +.transition-colors { + transition-property: color, background-color, border-color, outline-color, text-decoration-color, fill, stroke; 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); } .duration-100 { @@ -3511,18 +3513,18 @@ .focus\:outline-none:focus { outline-offset: 2px; outline: 2px solid #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-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-offset-2:focus { --tw-ring-offset-width: 2px;