「MediaWiki:Common.css」の版間の差分
編集の要約なし |
編集の要約なし |
||
| 590行目: | 590行目: | ||
.ga4- | /* ダッシュボード全体 */ | ||
.ga4-dashboard { | |||
background-color: var(--background-color-neutral, #f8f9fa); | background-color: var(--background-color-neutral, #f8f9fa); | ||
border: 1px solid var(--border-color-base, #a2a9b1); | border: 1px solid var(--border-color-base, #a2a9b1); | ||
border-radius: | border-radius: 6px; | ||
padding: | padding: 1.2em 1.5em; | ||
margin: 1em 0; | margin: 1.2em 0; | ||
font-family: inherit; | |||
} | |||
.ga4-dashboard h3 { | |||
margin: 0 0 0.8em 0; | |||
font-size: 1em; | |||
color: var(--color-subtle, #54595d); | |||
border-bottom: 1px solid var(--border-color-base, #a2a9b1); | |||
padding-bottom: 0.4em; | |||
} | |||
/* カード横並び */ | |||
.ga4-cards { | |||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
gap: 1em; | |||
} | } | ||
.ga4- | .ga4-card { | ||
flex: 1 1 120px; | |||
background: var(--background-color-base, #fff); | |||
border: 1px solid var(--border-color-base, #a2a9b1); | |||
border-radius: 4px; | |||
padding: 0.8em 1em; | |||
text-align: center; | text-align: center; | ||
} | } | ||
.ga4- | /* リアルタイムカードは強調 */ | ||
font-size: 1. | .ga4-card.realtime { | ||
border-color: var(--color-progressive, #3366cc); | |||
background-color: #eaf0fb; | |||
} | |||
.ga4-card-number { | |||
display: block; | |||
font-size: 1.9em; | |||
font-weight: bold; | font-weight: bold; | ||
color: var(--color-progressive, #3366cc); | color: var(--color-progressive, #3366cc); | ||
line-height: 1.2; | |||
} | |||
.ga4-card.realtime .ga4-card-number { | |||
color: #1a4a99; | |||
} | |||
.ga4-card-label { | |||
display: block; | display: block; | ||
font-size: 0.8em; | |||
color: var(--color-subtle, #54595d); | |||
margin-top: 0.3em; | |||
} | } | ||
.ga4- | /* リアルタイムの点滅インジケーター */ | ||
.ga4-live-dot { | |||
display: inline-block; | |||
width: 8px; | |||
height: 8px; | |||
background: #d73333; | |||
border-radius: 50%; | |||
margin-right: 4px; | |||
animation: ga4blink 1.2s infinite; | |||
} | |||
@keyframes ga4blink { | |||
0%, 100% { opacity: 1; } | |||
50% { opacity: 0.2; } | |||
} | } | ||
/* 更新日時 */ | |||
.ga4-meta { | .ga4-meta { | ||
font-size: 0. | font-size: 0.78em; | ||
color: var(--color-subtle, #54595d); | color: var(--color-subtle, #54595d); | ||
margin-top: 0. | margin-top: 0.8em; | ||
width: 100%; | text-align: right; | ||
} | |||
/* スマホ対応 */ | |||
@media (max-width: 600px) { | |||
.ga4-card { flex: 1 1 100%; } | |||
} | } | ||