「MediaWiki:Common.css」の版間の差分
編集の要約なし |
編集の要約なし |
||
| (同じ利用者による、間の1版が非表示) | |||
| 587行目: | 587行目: | ||
strong.mw-logo-wordmark { | strong.mw-logo-wordmark { | ||
visibility:hidden; | visibility:hidden; | ||
} | |||
/* ダッシュボード全体 */ | |||
.ga4-dashboard { | |||
background-color: var(--background-color-neutral, #f8f9fa); | |||
border: 1px solid var(--border-color-base, #a2a9b1); | |||
border-radius: 6px; | |||
padding: 1.2em 1.5em; | |||
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; | |||
flex-wrap: wrap; | |||
gap: 1em; | |||
} | |||
.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; | |||
} | |||
/* リアルタイムカードは強調 */ | |||
.ga4-card.realtime { | |||
border-color: var(--color-progressive, #3366cc); | |||
background-color: #eaf0fb; | |||
} | |||
.ga4-card-number { | |||
display: block; | |||
font-size: 1.9em; | |||
font-weight: bold; | |||
color: var(--color-progressive, #3366cc); | |||
line-height: 1.2; | |||
} | |||
.ga4-card.realtime .ga4-card-number { | |||
color: #1a4a99; | |||
} | |||
.ga4-card-label { | |||
display: block; | |||
font-size: 0.8em; | |||
color: var(--color-subtle, #54595d); | |||
margin-top: 0.3em; | |||
} | |||
/* リアルタイムの点滅インジケーター */ | |||
.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 { | |||
font-size: 0.78em; | |||
color: var(--color-subtle, #54595d); | |||
margin-top: 0.8em; | |||
text-align: right; | |||
} | |||
/* スマホ対応 */ | |||
@media (max-width: 600px) { | |||
.ga4-card { flex: 1 1 100%; } | |||
} | } | ||