MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 827: | Line 827: | ||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
OOO STEP (Guide | OOO STEP (Guide Step With Optional Image) | ||
========================================================= */ | ========================================================= */ | ||
.ooo-step { | .ooo-step { | ||
margin: 26px 0; | margin: 26px 0; | ||
padding: | padding: 16px 18px; | ||
border-left: 5px solid var(--ooo-accent); | border-left: 5px solid var(--ooo-accent); | ||
| Line 844: | Line 844: | ||
} | } | ||
/* | /* Header */ | ||
.ooo-step__title { | .ooo-step__title { | ||
font-weight: 800; | font-weight: 800; | ||
font-size: 1.05rem; | font-size: 1.05rem; | ||
margin-bottom: | margin-bottom: 8px; | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
} | } | ||
| Line 858: | Line 858: | ||
} | } | ||
/* Step | /* Layout container */ | ||
.ooo-step__body { | |||
display: flex; | |||
gap: 14px; | |||
align-items: flex-start; | |||
} | |||
/* Image thumbnail */ | |||
.ooo-step__image img { | |||
border-radius: 4px; | |||
border: 1px solid rgba(0,0,0,0.15); | |||
max-width: 140px; | |||
height: auto; | |||
} | |||
/* Step text */ | |||
.ooo-step__content { | .ooo-step__content { | ||
line-height: 1.65; | line-height: 1.65; | ||
| Line 864: | Line 879: | ||
} | } | ||
/* Dark | /* Dark mode tuning */ | ||
.skin-theme-clientpref-night .ooo-step { | .skin-theme-clientpref-night .ooo-step { | ||
background: linear-gradient( | background: linear-gradient( | ||
| Line 871: | Line 886: | ||
transparent | transparent | ||
); | ); | ||
} | |||
.skin-theme-clientpref-night .ooo-step__image img { | |||
border-color: rgba(255,255,255,0.2); | |||
} | |||
/* Mobile */ | |||
@media (max-width: 700px) { | |||
.ooo-step__body { | |||
flex-direction: column; | |||
} | |||
.ooo-step__image img { | |||
max-width: 100%; | |||
} | |||
} | } | ||