「メインページ」の版間の差分
提供: 川西図鑑
その他の操作
編集の要約なし |
編集の要約なし |
||
| 346行目: | 346行目: | ||
.card-grid { | .card-grid { | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(auto-fit, minmax( | grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); | ||
gap: 20px; | gap: 20px; | ||
} | } | ||
| 353行目: | 353行目: | ||
background: #fff; | background: #fff; | ||
border-radius: 16px; | border-radius: 16px; | ||
border: | border: 2px solid #e5e7eb; | ||
padding: | padding: 28px; | ||
transition: all 0. | transition: all 0.25s ease; | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
box-shadow: 0 2px 8px rgba(0,0,0,0. | box-shadow: 0 2px 8px rgba(0,0,0,0.06); | ||
cursor: pointer; | |||
position: relative; | |||
overflow: hidden; | |||
} | |||
.card::before { | |||
content: ''; | |||
position: absolute; | |||
top: 0; | |||
left: 0; | |||
right: 0; | |||
height: 4px; | |||
background: linear-gradient(90deg, #f59e0b, #d97706); | |||
transform: scaleX(0); | |||
transition: transform 0.3s ease; | |||
} | } | ||
.card:hover:not(.disabled) { | .card:hover:not(.disabled) { | ||
transform: translateY(- | transform: translateY(-6px); | ||
box-shadow: 0 | box-shadow: 0 12px 32px rgba(245, 158, 11, 0.2); | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
} | |||
.card:hover:not(.disabled)::before { | |||
transform: scaleX(1); | |||
} | |||
.card:active:not(.disabled) { | |||
transform: translateY(-2px); | |||
} | } | ||
.card .icon { | .card .icon { | ||
font-size: | font-size: 48px; | ||
margin-bottom: | margin-bottom: 20px; | ||
line-height: 1; | |||
} | } | ||
.card .title { | .card .title { | ||
font-size: 18px; | font-size: 18px; | ||
font-weight: | font-weight: 700; | ||
color: #111827; | color: #111827; | ||
margin-bottom: | margin-bottom: 10px; | ||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
| 382行目: | 409行目: | ||
font-size: 14px; | font-size: 14px; | ||
color: #6b7280; | color: #6b7280; | ||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
| 387行目: | 417行目: | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
padding: | padding: 24px; | ||
border-bottom: 1px solid #e5e7eb; | border-bottom: 1px solid #e5e7eb; | ||
margin-bottom: | margin-bottom: 20px; | ||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | color: inherit; | ||
border-radius: 12px; | border-radius: 12px; | ||
transition: | transition: all 0.2s; | ||
cursor: pointer; | |||
} | } | ||
.card-main:hover { | .card-main:hover { | ||
background: #f9fafb; | background: #f9fafb; | ||
transform: translateX(2px); | |||
} | |||
.card-main .icon { | |||
font-size: 48px; | |||
margin-bottom: 16px; | |||
line-height: 1; | |||
} | |||
.card-main .title { | |||
font-size: 18px; | |||
font-weight: 700; | |||
color: #111827; | |||
margin-bottom: 8px; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | |||
.card-main .desc { | |||
font-size: 14px; | |||
color: #6b7280; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
| 403行目: | 459行目: | ||
display: grid; | display: grid; | ||
grid-template-columns: 1fr 1fr; | grid-template-columns: 1fr 1fr; | ||
gap: | gap: 12px; | ||
} | } | ||
| 410行目: | 466行目: | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
padding: | padding: 16px 12px; | ||
border: | border: 2px solid #e5e7eb; | ||
border-radius: 10px; | border-radius: 10px; | ||
text-align: center; | text-align: center; | ||
font-size: 13px; | font-size: 13px; | ||
font-weight: | font-weight: 600; | ||
text-decoration: none; | text-decoration: none; | ||
color: #374151; | color: #374151; | ||
background: #fff; | background: #fff; | ||
transition: all 0.2s; | transition: all 0.2s; | ||
cursor: pointer; | |||
white-space: nowrap; | |||
overflow: hidden; | |||
text-overflow: ellipsis; | |||
} | } | ||
.card-box:hover { | .card-box:hover { | ||
background: # | background: #fef3c7; | ||
border-color: #f59e0b; | border-color: #f59e0b; | ||
color: # | color: #d97706; | ||
transform: translateY(-2px); | |||
box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); | |||
} | |||
.card-box:active { | |||
transform: translateY(0); | |||
} | } | ||
.card.disabled { | .card.disabled { | ||
opacity: 0. | opacity: 0.45; | ||
pointer-events: none; | pointer-events: none; | ||
cursor: not-allowed; | |||
} | } | ||
| 542行目: | 609行目: | ||
} | } | ||
.skin-theme-clientpref- | .skin-theme-clientpref-os .card, | ||
.skin-theme-clientpref- | .skin-theme-clientpref-os .article-item { | ||
.skin-theme-clientpref- | background: #2a2a2a; | ||
border-color: #3a3a3a; | |||
color: #e5e7eb; | |||
} | |||
} | |||
.skin-theme-clientpref-os .card:hover:not(.disabled) { | |||
.skin-theme-clientpref- | border-color: #f59e0b; | ||
box-shadow: 0 12px 32px rgba(245, 158, 11, 0.3); | |||
} | } | ||
.skin-theme-clientpref- | .skin-theme-clientpref-os .card .title, | ||
.skin-theme-clientpref-os .card-main .title { | |||
} | color: #f9fafb; | ||
} | |||
.skin-theme-clientpref- | |||
.skin-theme-clientpref-os .card .desc, | |||
} | .skin-theme-clientpref-os .card-main .desc { | ||
color: #9ca3af; | |||
.skin-theme-clientpref- | } | ||
.skin-theme-clientpref- | |||
.skin-theme-clientpref-os .card-main { | |||
} | border-color: #3a3a3a; | ||
} | |||
.skin-theme-clientpref-os .card-main:hover { | |||
background: #374151; | |||
} | |||
.skin-theme-clientpref-os .card-box { | |||
background: #2a2a2a; | |||
border-color: #3a3a3a; | |||
color: #e5e7eb; | |||
} | |||
.skin-theme-clientpref-os .card-box:hover { | |||
background: #3a3a3a; | |||
border-color: #f59e0b; | |||
color: #fbbf24; | |||
} | |||
.skin-theme-clientpref-night .kz-btn.secondary { | .skin-theme-clientpref-night .kz-btn.secondary { | ||
2026年1月22日 (木) 17:06時点における版
図鑑で探す
準備中
記事
川西のさまざまな図鑑ページに関連する、
ユーザーが書いた記事を紹介します。
川西能勢口で見つけた小さな名店
昔の川西と今を比べてみる
川西で活動する人たち
今日の川西
ランダムに1件表示しています。
エラー: テーブル飲食店情報が見つかりません。
お店のオーナー様へ
情報の修正や、写真・メニューの追加、公式図鑑ページとしての掲載が可能です。
市民の皆さんへ 情報提供のお願い
営業時間や定休日の変更、新店舗情報など、市民の皆さんからの情報提供を受け付けています。