zenn/zenn.inventory
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

[260204] OG 정보 추가, 모달 오픈시 히스토리백 기능 적용

Browse Source
This commit is contained in:
zenn
2026-02-04 16:16:09 +09:00
parent b29cd5e7d9
commit f15fcfbcf8
4 changed files with 138 additions and 187 deletions
Download Patch File Download Diff File Expand all files Collapse all files

191
style/tailwind.css
View File

@@ -352,14 +352,11 @@
.mb-3 {
margin-bottom: calc(var(--spacing) * 3);
}
.mb-4 {
margin-bottom: calc(var(--spacing) * 4);
}
.mb-6 {
margin-bottom: calc(var(--spacing) * 6);
}
.mb-8 {
margin-bottom: calc(var(--spacing) * 8);
.mb-10 {
margin-bottom: calc(var(--spacing) * 10);
}
.ml-0 {
margin-left: calc(var(--spacing) * 0);
@@ -382,6 +379,10 @@
.aspect-\[4\/5\] {
aspect-ratio: 4/5;
}
.size-1 {
width: calc(var(--spacing) * 1);
height: calc(var(--spacing) * 1);
}
.size-8 {
width: calc(var(--spacing) * 8);
height: calc(var(--spacing) * 8);
@@ -433,9 +434,6 @@
.min-h-0 {
min-height: calc(var(--spacing) * 0);
}
.min-h-\[260px\] {
min-height: 260px;
}
.min-h-screen {
min-height: 100vh;
}
@@ -469,9 +467,6 @@
.max-w-full {
max-width: 100%;
}
.max-w-xl {
max-width: var(--container-xl);
}
.min-w-0 {
min-width: calc(var(--spacing) * 0);
}
@@ -628,12 +623,6 @@
.border-gray-200 {
border-color: var(--color-gray-200);
}
.border-gray-200\/80 {
border-color: color-mix(in srgb, oklch(92.8% 0.006 264.531) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gray-200) 80%, transparent);
}
}
.border-slate-200 {
border-color: var(--color-slate-200);
}
@@ -676,18 +665,9 @@
.bg-emerald-100 {
background-color: var(--color-emerald-100);
}
.bg-gray-50 {
background-color: var(--color-gray-50);
}
.bg-gray-100 {
background-color: var(--color-gray-100);
}
.bg-gray-100\/50 {
background-color: color-mix(in srgb, oklch(96.7% 0.003 264.542) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-100) 50%, transparent);
}
}
.bg-gray-300 {
background-color: var(--color-gray-300);
}
@@ -715,6 +695,12 @@
.bg-slate-50 {
background-color: var(--color-slate-50);
}
.bg-slate-50\/50 {
background-color: color-mix(in srgb, oklch(98.4% 0.003 247.858) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-slate-50) 50%, transparent);
}
}
.bg-slate-100 {
background-color: var(--color-slate-100);
}
@@ -724,6 +710,9 @@
background-color: color-mix(in oklab, var(--color-slate-200) 10%, transparent);
}
}
.bg-slate-300 {
background-color: var(--color-slate-300);
}
.bg-slate-400\/10 {
background-color: color-mix(in srgb, oklch(70.4% 0.04 256.788) 10%, transparent);
@supports (color: color-mix(in lab, red, red)) {
@@ -781,15 +770,9 @@
.p-4 {
padding: calc(var(--spacing) * 4);
}
.p-6 {
padding: calc(var(--spacing) * 6);
}
.px-2 {
padding-inline: calc(var(--spacing) * 2);
}
.px-2\.5 {
padding-inline: calc(var(--spacing) * 2.5);
}
.px-3 {
padding-inline: calc(var(--spacing) * 3);
}
@@ -808,15 +791,15 @@
.py-1\.5 {
padding-block: calc(var(--spacing) * 1.5);
}
.py-2 {
padding-block: calc(var(--spacing) * 2);
}
.py-3 {
padding-block: calc(var(--spacing) * 3);
}
.py-4 {
padding-block: calc(var(--spacing) * 4);
}
.py-8 {
padding-block: calc(var(--spacing) * 8);
}
.py-10 {
padding-block: calc(var(--spacing) * 10);
}
@@ -826,6 +809,9 @@
.pt-4 {
padding-top: calc(var(--spacing) * 4);
}
.pt-6 {
padding-top: calc(var(--spacing) * 6);
}
.pr-1 {
padding-right: calc(var(--spacing) * 1);
}
@@ -841,14 +827,6 @@
.text-right {
text-align: right;
}
.text-2xl {
font-size: var(--text-2xl);
line-height: var(--tw-leading, var(--text-2xl--line-height));
}
.text-3xl {
font-size: var(--text-3xl);
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
.text-base {
font-size: var(--text-base);
line-height: var(--tw-leading, var(--text-base--line-height));
@@ -872,6 +850,9 @@
.text-\[10px\] {
font-size: 10px;
}
.text-\[11px\] {
font-size: 11px;
}
.text-\[20px\] {
font-size: 20px;
}
@@ -991,9 +972,6 @@
.text-slate-600 {
color: var(--color-slate-600);
}
.text-slate-700 {
color: var(--color-slate-700);
}
.text-slate-900 {
color: var(--color-slate-900);
}
@@ -1112,6 +1090,13 @@
color: var(--color-slate-400);
}
}
.hover\:bg-slate-100 {
&:hover {
@media (hover: hover) {
background-color: var(--color-slate-100);
}
}
}
.hover\:bg-white {
&:hover {
@media (hover: hover) {
@@ -1160,14 +1145,9 @@
margin-bottom: calc(var(--spacing) * 8);
}
}
.sm\:flex {
.sm\:block {
@media (width >= 40rem) {
display: flex;
}
}
.sm\:hidden {
@media (width >= 40rem) {
display: none;
display: block;
}
}
.sm\:h-5 {
@@ -1264,11 +1244,6 @@
font-size: 11px;
}
}
.md\:mb-4 {
@media (width >= 48rem) {
margin-bottom: calc(var(--spacing) * 4);
}
}
.md\:ml-24 {
@media (width >= 48rem) {
margin-left: calc(var(--spacing) * 24);
@@ -1314,26 +1289,11 @@
flex-direction: row;
}
}
.md\:gap-2 {
@media (width >= 48rem) {
gap: calc(var(--spacing) * 2);
}
}
.md\:rounded-2xl {
@media (width >= 48rem) {
border-radius: var(--radius-2xl);
}
}
.md\:rounded-lg {
@media (width >= 48rem) {
border-radius: var(--radius-lg);
}
}
.md\:object-cover {
@media (width >= 48rem) {
object-fit: cover;
}
}
.md\:p-0 {
@media (width >= 48rem) {
padding: calc(var(--spacing) * 0);
@@ -1354,11 +1314,6 @@
padding: calc(var(--spacing) * 10);
}
}
.md\:px-2\.5 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 2.5);
}
}
.md\:px-4 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 4);
@@ -1369,21 +1324,11 @@
padding-inline: calc(var(--spacing) * 8);
}
}
.md\:px-10 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 10);
}
}
.md\:px-40 {
@media (width >= 48rem) {
padding-inline: calc(var(--spacing) * 40);
}
}
.md\:py-1 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 1);
}
}
.md\:py-2 {
@media (width >= 48rem) {
padding-block: calc(var(--spacing) * 2);
@@ -1401,18 +1346,6 @@
line-height: var(--tw-leading, var(--text-3xl--line-height));
}
}
.md\:text-4xl {
@media (width >= 48rem) {
font-size: var(--text-4xl);
line-height: var(--tw-leading, var(--text-4xl--line-height));
}
}
.md\:text-5xl {
@media (width >= 48rem) {
font-size: var(--text-5xl);
line-height: var(--tw-leading, var(--text-5xl--line-height));
}
}
.md\:text-sm {
@media (width >= 48rem) {
font-size: var(--text-sm);
@@ -1425,21 +1358,6 @@
line-height: var(--tw-leading, var(--text-xs--line-height));
}
}
.lg\:ml-24 {
@media (width >= 64rem) {
margin-left: calc(var(--spacing) * 24);
}
}
.lg\:flex {
@media (width >= 64rem) {
display: flex;
}
}
.lg\:hidden {
@media (width >= 64rem) {
display: none;
}
}
.lg\:grid-cols-3 {
@media (width >= 64rem) {
grid-template-columns: repeat(3, minmax(0, 1fr));
@@ -1477,14 +1395,6 @@
grid-template-columns: repeat(5, minmax(0, 1fr));
}
}
.dark\:border-gray-600\/80 {
@media (prefers-color-scheme: dark) {
border-color: color-mix(in srgb, oklch(44.6% 0.03 256.802) 80%, transparent);
@supports (color: color-mix(in lab, red, red)) {
border-color: color-mix(in oklab, var(--color-gray-600) 80%, transparent);
}
}
}
.dark\:border-gray-800 {
@media (prefers-color-scheme: dark) {
border-color: var(--color-gray-800);
@@ -1534,14 +1444,6 @@
background-color: var(--color-gray-800);
}
}
.dark\:bg-gray-800\/50 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-gray-800) 50%, transparent);
}
}
}
.dark\:bg-gray-800\/80 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(27.8% 0.033 256.848) 80%, transparent);
@@ -1550,11 +1452,6 @@
}
}
}
.dark\:bg-gray-900 {
@media (prefers-color-scheme: dark) {
background-color: var(--color-gray-900);
}
}
.dark\:bg-green-900\/30 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(39.3% 0.095 152.535) 30%, transparent);
@@ -1626,6 +1523,14 @@
background-color: var(--color-slate-900);
}
}
.dark\:bg-slate-900\/50 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(20.8% 0.042 265.755) 50%, transparent);
@supports (color: color-mix(in lab, red, red)) {
background-color: color-mix(in oklab, var(--color-slate-900) 50%, transparent);
}
}
}
.dark\:bg-teal-900\/30 {
@media (prefers-color-scheme: dark) {
background-color: color-mix(in srgb, oklch(38.6% 0.063 188.416) 30%, transparent);
@@ -1709,6 +1614,11 @@
color: var(--color-slate-100);
}
}
.dark\:text-slate-300 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-300);
}
}
.dark\:text-slate-400 {
@media (prefers-color-scheme: dark) {
color: var(--color-slate-400);
@@ -1743,6 +1653,15 @@
}
}
}
.dark\:hover\:bg-slate-700 {
@media (prefers-color-scheme: dark) {
&:hover {
@media (hover: hover) {
background-color: var(--color-slate-700);
}
}
}
}
}
@property --tw-translate-x {
syntax: "*";