public/lookbook-assets/css/lookbook.css in lookbook-1.0.8 vs public/lookbook-assets/css/lookbook.css in lookbook-1.1.0
- old
+ new
@@ -215,11 +215,11 @@
padding-top: 0;
padding-bottom: 0;
}
select {
- color-adjust: exact;
+ print-color-adjust: exact;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
background-position: right .5rem center;
background-repeat: no-repeat;
background-size: 1.5em 1.5em;
padding-right: 2.5rem;
@@ -228,18 +228,19 @@
[multiple] {
background-image: initial;
background-position: initial;
background-repeat: unset;
background-size: initial;
- color-adjust: unset;
+ print-color-adjust: unset;
padding-right: .75rem;
}
[type="checkbox"], [type="radio"] {
appearance: none;
- color-adjust: exact;
+ print-color-adjust: exact;
vertical-align: middle;
+ -webkit-user-select: none;
user-select: none;
height: 1rem;
width: 1rem;
color: #2563eb;
--tw-shadow: 0 0 #0000;
@@ -316,10 +317,11 @@
border-radius: 0;
padding: 0;
}
[type="file"]:focus {
+ outline: 1px solid ButtonText;
outline: 1px auto -webkit-focus-ring-color;
}
html {
height: 100vh;
@@ -418,10 +420,53 @@
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
+.form-input, .form-textarea, .form-select, .form-multiselect {
+ appearance: none;
+ --tw-shadow: 0 0 #0000;
+ background-color: #fff;
+ border-width: 1px;
+ border-color: #6b7280;
+ border-radius: 0;
+ padding: .5rem .75rem;
+ font-size: 1rem;
+ line-height: 1.5rem;
+}
+
+.form-input:focus, .form-textarea:focus, .form-select:focus, .form-multiselect:focus {
+ outline-offset: 2px;
+ --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);
+ box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
+ border-color: #2563eb;
+ outline: 2px solid #0000;
+}
+
+.form-input::placeholder, .form-textarea::placeholder {
+ color: #6b7280;
+ opacity: 1;
+}
+
+.form-input::-webkit-datetime-edit-fields-wrapper {
+ padding: 0;
+}
+
+.form-input::-webkit-date-and-time-value {
+ min-height: 1.5em;
+}
+
+.form-input::-webkit-datetime-edit, .form-input::-webkit-datetime-edit-year-field, .form-input::-webkit-datetime-edit-month-field, .form-input::-webkit-datetime-edit-day-field, .form-input::-webkit-datetime-edit-hour-field, .form-input::-webkit-datetime-edit-minute-field, .form-input::-webkit-datetime-edit-second-field, .form-input::-webkit-datetime-edit-millisecond-field, .form-input::-webkit-datetime-edit-meridiem-field {
+ padding-top: 0;
+ padding-bottom: 0;
+}
+
.prose {
color: var(--tw-prose-body);
max-width: 65ch;
}
@@ -1604,10 +1649,11 @@
[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;
@@ -1646,11 +1692,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, 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;
}
@@ -1667,10 +1713,89 @@
.lookbook-panel {
min-height: 100%;
padding: 1rem;
}
+[data-component="params-editor"] table:not(.linear) thead tr {
+ --tw-border-opacity: 1;
+ border-bottom-width: 1px;
+ border-color: rgb(209 213 219 / var(--tw-border-opacity));
+}
+
+[data-component="params-editor"] table:not(.linear) thead th {
+ text-align: left;
+ vertical-align: middle;
+ padding: 1rem;
+ font-weight: 700;
+}
+
+[data-component="params-editor"] table:not(.linear) thead th.param-label {
+ width: 18%;
+}
+
+[data-component="params-editor"] table:not(.linear) thead th.param-input {
+ width: 45%;
+}
+
+[data-component="params-editor"] table:not(.linear) tbody tr + tr td {
+ --tw-border-opacity: 1;
+ border-top-width: 1px;
+ border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+[data-component="params-editor"] table:not(.linear) tbody td {
+ vertical-align: middle;
+ padding: 1rem;
+}
+
+[data-component="params-editor"] table:not(.linear) tbody td.param-label {
+ font-weight: 700;
+}
+
+[data-component="params-editor"] table:not(.linear) tbody .param-input-wrapper {
+ min-height: 38px;
+}
+
+[data-component="params-editor"] table.linear table, [data-component="params-editor"] table.linear tr, [data-component="params-editor"] table.linear td {
+ display: block;
+}
+
+[data-component="params-editor"] table.linear thead, [data-component="params-editor"] table.linear th {
+ display: none;
+}
+
+[data-component="params-editor"] table.linear tr:not(:last-child) {
+ --tw-border-opacity: 1;
+ border-bottom-width: 1px;
+ border-color: rgb(229 231 235 / var(--tw-border-opacity));
+}
+
+[data-component="params-editor"] table.linear tr > :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));
+}
+
+[data-component="params-editor"] table.linear tr {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
+[data-component="params-editor"] table.linear td {
+ vertical-align: middle;
+ padding-left: 1rem;
+ padding-right: 1rem;
+}
+
+[data-component="params-editor"] table.linear td.param-label {
+ font-weight: 700;
+}
+
+[data-component="params-editor"] table.linear td.param-description-empty {
+ display: none;
+}
+
[data-component="prose"] [data-component="code"] {
border-width: 1px;
border-color: var(--lookbook-divider);
border-radius: .375rem;
}
@@ -1723,53 +1848,119 @@
align-items: center;
display: flex;
}
[data-component="viewport"] .resize-handle:hover {
- background-color: rgb(224 231 255 / var(--tw-bg-opacity));
+ background-color: var(--lookbook-draggable-hint);
--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-stroke);
- transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, 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 {
color: var(--lookbook-viewport-handle-icon-stroke-hover);
}
-.form-input {
+[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"], textarea, select {
color: var(--lookbook-input-text);
}
-.form-input::placeholder {
+[type="text"]::placeholder, [type="email"]::placeholder, [type="url"]::placeholder, [type="password"]::placeholder, [type="number"]::placeholder, [type="date"]::placeholder, [type="datetime-local"]::placeholder, [type="month"]::placeholder, [type="search"]::placeholder, [type="tel"]::placeholder, [type="time"]::placeholder, [type="week"]::placeholder, textarea::placeholder, select::placeholder {
color: var(--lookbook-input-text-placeholder);
font-style: italic;
}
-.form-input {
+[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"], textarea, select {
border-color: var(--lookbook-input-border);
}
-.form-input:focus {
+[type="text"]:focus, [type="email"]:focus, [type="url"]:focus, [type="password"]:focus, [type="number"]:focus, [type="date"]:focus, [type="datetime-local"]:focus, [type="month"]:focus, [type="search"]:focus, [type="tel"]:focus, [type="time"]:focus, [type="week"]:focus, textarea:focus, select:focus {
border-color: var(--lookbook-input-border-focus);
--tw-ring-color: var(--lookbook-input-border-focus);
}
-.form-input {
+[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"], textarea, select {
width: 100%;
background-color: var(--lookbook-input-bg);
border-radius: .375rem;
font-size: .875rem;
line-height: 1.25rem;
+ display: block;
}
+input[type="range"] {
+ appearance: none;
+ cursor: pointer;
+ width: 100%;
+ background: none;
+}
+
+input[type="range"]:focus {
+ outline: none;
+}
+
+input[type="range"]::-webkit-slider-runnable-track {
+ background-color: var(--lookbook-input-toggle);
+ height: .5rem;
+ border-radius: .5rem;
+}
+
+input[type="range"]::-webkit-slider-thumb {
+ appearance: none;
+ background-color: var(--lookbook-input-toggle-active);
+ height: 1rem;
+ width: 1rem;
+ border-radius: .5rem;
+ margin-top: -4px;
+}
+
+input[type="range"]::-moz-range-track {
+ background-color: var(--lookbook-input-toggle);
+ height: .5rem;
+ border-radius: .5rem;
+}
+
+input[type="range"]::-moz-range-thumb {
+ background-color: var(--lookbook-input-toggle-active);
+ height: 1rem;
+ width: 1rem;
+ border: none;
+ border-radius: .5rem;
+}
+
+input[type="range"]:focus::-webkit-slider-thumb, input[type="range"]:focus::-moz-range-thumb {
+ outline-offset: 2px;
+ outline-width: 1px;
+ outline-color: var(--lookbook-input-toggle-active);
+}
+
+input[type="color"] {
+ -webkit-appearance: none;
+ width: 46px;
+ cursor: pointer;
+ border-width: 1px;
+ border-color: var(--lookbook-input-border);
+ border-radius: .5rem;
+}
+
+input[type="color"]::-webkit-color-swatch-wrapper {
+ padding: 0;
+}
+
+input[type="color"]::-webkit-color-swatch {
+ border-width: 0;
+ border-radius: .5rem;
+}
+
.pointer-events-none {
pointer-events: none;
}
.visible {
@@ -1830,10 +2021,14 @@
.right-3 {
right: .75rem;
}
+.right-\[18px\] {
+ right: 18px;
+}
+
.-top-px {
top: -1px;
}
.-left-px {
@@ -1842,10 +2037,14 @@
.-left-4 {
left: -1rem;
}
+.top-\[2px\] {
+ top: 2px;
+}
+
.-bottom-px {
bottom: -1px;
}
.z-50 {
@@ -1920,26 +2119,26 @@
.mb-4 {
margin-bottom: 1rem;
}
-.mb-\[-2px\] {
- margin-bottom: -2px;
-}
-
-.mt-1 {
- margin-top: .25rem;
-}
-
.mr-1 {
margin-right: .25rem;
}
.mr-6 {
margin-right: 1.5rem;
}
+.mb-\[-2px\] {
+ margin-bottom: -2px;
+}
+
+.mt-1 {
+ margin-top: .25rem;
+}
+
.mb-6 {
margin-bottom: 1.5rem;
}
.-ml-3 {
@@ -1956,10 +2155,18 @@
.mr-1\.5 {
margin-right: .375rem;
}
+.mr-0\.5 {
+ margin-right: .125rem;
+}
+
+.mr-0 {
+ margin-right: 0;
+}
+
.block {
display: block;
}
.\!block {
@@ -1980,10 +2187,14 @@
.inline-flex {
display: inline-flex;
}
+.table {
+ display: table;
+}
+
.grid {
display: grid;
}
.contents {
@@ -2012,38 +2223,38 @@
.h-\[calc\(100vh_-_40px\)\] {
height: calc(100vh - 40px);
}
-.h-\[9px\] {
- height: 9px;
+.h-6 {
+ height: 1.5rem;
}
-.h-10 {
- height: 2.5rem;
+.h-5 {
+ height: 1.25rem;
}
-.h-4 {
- height: 1rem;
-}
-
.h-3\.5 {
height: .875rem;
}
.h-3 {
height: .75rem;
}
-.h-6 {
- height: 1.5rem;
+.h-\[9px\] {
+ height: 9px;
}
-.h-5 {
- height: 1.25rem;
+.h-10 {
+ height: 2.5rem;
}
+.h-4 {
+ height: 1rem;
+}
+
.\!h-auto {
height: auto !important;
}
.max-h-full {
@@ -2060,42 +2271,34 @@
.w-screen {
width: 100vw;
}
-.w-\[9px\] {
- width: 9px;
+.w-11 {
+ width: 2.75rem;
}
-.w-4 {
- width: 1rem;
+.w-5 {
+ width: 1.25rem;
}
.w-3\.5 {
width: .875rem;
}
.w-3 {
width: .75rem;
}
-.w-\[140px\] {
- width: 140px;
+.w-\[9px\] {
+ width: 9px;
}
-.w-11 {
- width: 2.75rem;
+.w-4 {
+ width: 1rem;
}
-.w-5 {
- width: 1.25rem;
-}
-
-.min-w-\[140px\] {
- min-width: 140px;
-}
-
.min-w-\[180px\] {
min-width: 180px;
}
.min-w-0 {
@@ -2120,24 +2323,20 @@
.max-w-xs {
max-width: 20rem;
}
-.max-w-\[800px\] {
- max-width: 800px;
-}
-
.flex-none {
flex: none;
}
.flex-shrink-0 {
flex-shrink: 0;
}
-.flex-grow {
- flex-grow: 1;
+.border-collapse {
+ border-collapse: collapse;
}
.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));
@@ -2146,25 +2345,25 @@
.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-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-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-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-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));
-}
-
.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));
}
@@ -2183,17 +2382,21 @@
transform: rotate(360deg);
}
}
.animate-spin {
- animation: spin 1s linear infinite;
+ animation: 1s linear infinite spin;
}
.\!cursor-default {
cursor: default !important;
}
+.cursor-pointer {
+ cursor: pointer;
+}
+
.cursor-\[not-allowed\] {
cursor: not-allowed;
}
.cursor-\[col-resize\] {
@@ -2206,15 +2409,16 @@
.cursor-\[nwse-resize\] {
cursor: nwse-resize;
}
-.cursor-pointer {
- cursor: pointer;
+.cursor-help {
+ cursor: help;
}
.select-none {
+ -webkit-user-select: none;
user-select: none;
}
.resize {
resize: both;
@@ -2246,14 +2450,10 @@
.flex-col {
flex-direction: column;
}
-.items-start {
- align-items: flex-start;
-}
-
.items-center {
align-items: center;
}
.items-stretch {
@@ -2266,16 +2466,10 @@
.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));
}
@@ -2284,10 +2478,16 @@
--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]) {
+ --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-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)) );
}
@@ -2296,10 +2496,16 @@
--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));
+}
+
.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));
}
@@ -2326,10 +2532,14 @@
.overflow-y-auto {
overflow-y: auto;
}
+.overflow-x-hidden {
+ overflow-x: hidden;
+}
+
.overflow-y-hidden {
overflow-y: hidden;
}
.scroll-smooth {
@@ -2348,26 +2558,30 @@
.whitespace-pre-wrap {
white-space: pre-wrap;
}
+.rounded-full {
+ border-radius: 9999px;
+}
+
.rounded-sm {
border-radius: .125rem;
}
.rounded-md {
border-radius: .375rem;
}
-.rounded-full {
- border-radius: 9999px;
-}
-
.rounded-bl-md {
border-bottom-left-radius: .375rem;
}
+.rounded-tl-sm {
+ border-top-left-radius: .125rem;
+}
+
.border {
border-width: 1px;
}
.border-2 {
@@ -2422,23 +2636,23 @@
.border-gray-300 {
--tw-border-opacity: 1;
border-color: rgb(209 213 219 / var(--tw-border-opacity));
}
+.border-transparent {
+ border-color: #0000;
+}
+
.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-transparent {
- border-color: #0000;
-}
-
.border-lookbook-tabs-border-active {
border-color: var(--lookbook-tabs-border-active);
}
.bg-white {
@@ -2475,23 +2689,31 @@
.bg-lookbook-drawer-bg {
background-color: var(--lookbook-drawer-bg);
}
-.bg-lookbook-prose-bg {
- background-color: var(--lookbook-prose-bg);
+.bg-lookbook-input-toggle-active {
+ background-color: var(--lookbook-input-toggle-active);
}
-.\!bg-lookbook-header-bg {
- background-color: var(--lookbook-header-bg) !important;
+.bg-lookbook-input-toggle {
+ background-color: var(--lookbook-input-toggle);
}
+.bg-lookbook-prose-bg {
+ background-color: var(--lookbook-prose-bg);
+}
+
.bg-zinc-50 {
--tw-bg-opacity: 1;
background-color: rgb(250 250 250 / var(--tw-bg-opacity));
}
+.\!bg-lookbook-header-bg {
+ background-color: var(--lookbook-header-bg) !important;
+}
+
.bg-lookbook-divider {
background-color: var(--lookbook-divider);
}
.bg-lookbook-toolbar-bg {
@@ -2500,22 +2722,18 @@
.bg-lookbook-viewport-handle {
background-color: var(--lookbook-viewport-handle);
}
+.bg-gray-100\/80 {
+ background-color: #f3f4f6cc;
+}
+
.\!bg-lookbook-nav-item-active {
background-color: var(--lookbook-nav-item-active) !important;
}
-.bg-lookbook-input-toggle-active {
- background-color: var(--lookbook-input-toggle-active);
-}
-
-.bg-lookbook-input-toggle {
- background-color: var(--lookbook-input-toggle);
-}
-
.stroke-current {
stroke: currentColor;
}
.stroke-2 {
@@ -2564,35 +2782,40 @@
.py-2 {
padding-top: .5rem;
padding-bottom: .5rem;
}
-.py-3 {
- padding-top: .75rem;
- padding-bottom: .75rem;
+.px-2 {
+ padding-left: .5rem;
+ padding-right: .5rem;
}
.px-3 {
padding-left: .75rem;
padding-right: .75rem;
}
+.py-3 {
+ padding-top: .75rem;
+ padding-bottom: .75rem;
+}
+
.py-1 {
padding-top: .25rem;
padding-bottom: .25rem;
}
+.py-4 {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+}
+
.px-1 {
padding-left: .25rem;
padding-right: .25rem;
}
-.px-2 {
- padding-left: .5rem;
- padding-right: .5rem;
-}
-
.pb-10 {
padding-bottom: 2.5rem;
}
.pt-1 {
@@ -2629,42 +2852,54 @@
.pb-12 {
padding-bottom: 3rem;
}
+.pt-2 {
+ padding-top: .5rem;
+}
+
.pt-\[4px\] {
padding-top: 4px;
}
.pb-0 {
padding-bottom: 0;
}
-.pr-2 {
- padding-right: .5rem;
+.pr-1 {
+ padding-right: .25rem;
}
+.pl-2 {
+ padding-left: .5rem;
+}
+
+.pt-1\.5 {
+ padding-top: .375rem;
+}
+
.pt-2\.5 {
padding-top: .625rem;
}
.pb-1\.5 {
padding-bottom: .375rem;
}
-.pt-2 {
- padding-top: .5rem;
-}
-
.text-left {
text-align: left;
}
.text-center {
text-align: center;
}
+.align-middle {
+ vertical-align: middle;
+}
+
.font-mono {
font-family: SFMono-Regular, Consolas, Liberation Mono, Menlo, Courier, monospace;
}
.font-sans {
@@ -2759,21 +2994,25 @@
.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-branding-text {
color: var(--lookbook-branding-text);
}
-.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);
}
.text-lookbook-prose-text {
color: var(--lookbook-prose-text);
}
@@ -2792,10 +3031,15 @@
.text-lookbook-nav-icon-stroke {
color: var(--lookbook-nav-icon-stroke);
}
+.text-red-500 {
+ --tw-text-opacity: 1;
+ color: rgb(239 68 68 / var(--tw-text-opacity));
+}
+
.text-lookbook-tabs-text {
color: var(--lookbook-tabs-text);
}
.text-lookbook-tabs-text-hover {
@@ -2828,30 +3072,34 @@
.opacity-90 {
opacity: .9;
}
-.opacity-30 {
- opacity: .3;
-}
-
.opacity-40 {
opacity: .4;
}
-.\!opacity-100 {
- opacity: 1 !important;
+.opacity-80 {
+ opacity: .8;
}
.opacity-70 {
opacity: .7;
}
-.opacity-80 {
- opacity: .8;
+.\!opacity-100 {
+ opacity: 1 !important;
}
+.opacity-25 {
+ opacity: .25;
+}
+
+.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);
box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
@@ -2876,11 +3124,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, 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-opacity {
@@ -3115,15 +3363,10 @@
.hover\:bg-lookbook-draggable-hint:hover {
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));
-}
-
.hover\:bg-lookbook-nav-item-hover:hover {
background-color: var(--lookbook-nav-item-hover);
}
.hover\:text-gray-900:hover {
@@ -3159,18 +3402,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;