MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 827: | Line 827: | ||
} | } | ||
/* ========================================================= | /* ========================================================= | ||
OOO STEP (Guide Step | OOO STEP (Guide / Tutorial Step Block) | ||
========================================================= */ | ========================================================= */ | ||
| Line 848: | Line 848: | ||
font-weight: 800; | font-weight: 800; | ||
font-size: 1.05rem; | font-size: 1.05rem; | ||
margin-bottom: | margin-bottom: 10px; | ||
color: var(--ooo-accent); | color: var(--ooo-accent); | ||
} | } | ||
| Line 863: | Line 863: | ||
gap: 14px; | gap: 14px; | ||
align-items: flex-start; | align-items: flex-start; | ||
overflow: visible; | |||
} | } | ||
/* | /* ========================================================= | ||
STEP IMAGE | |||
========================================================= */ | |||
.ooo-step__image { | |||
position: relative; | |||
flex-shrink: 0; | |||
} | |||
/* Thumbnail */ | |||
.ooo-step__image img { | .ooo-step__image img { | ||
max-width: 140px; | |||
height: auto; | |||
border-radius: 4px; | border-radius: 4px; | ||
border: 1px solid rgba(0,0,0,0.15); | border: 1px solid rgba(0,0,0,0.15); | ||
cursor: zoom-in; | |||
transition: | |||
transform 0.2s ease, | |||
box-shadow 0.2s ease; | |||
} | |||
/* Hover zoom preview */ | |||
.ooo-step__image:hover img { | |||
transform: scale(2.2); | |||
position: relative; | |||
z-index: 50; | |||
box-shadow: 0 10px 24px rgba(0,0,0,0.35); | |||
} | } | ||
/* | /* ========================================================= | ||
STEP TEXT | |||
========================================================= */ | |||
.ooo-step__content { | .ooo-step__content { | ||
line-height: 1.65; | line-height: 1.65; | ||
| Line 879: | Line 908: | ||
} | } | ||
/* | /* ========================================================= | ||
DARK MODE | |||
========================================================= */ | |||
.skin-theme-clientpref-night .ooo-step { | .skin-theme-clientpref-night .ooo-step { | ||
background: linear-gradient( | background: linear-gradient( | ||
| Line 892: | Line 924: | ||
} | } | ||
/* | /* ========================================================= | ||
MOBILE | |||
========================================================= */ | |||
@media (max-width: 700px) { | @media (max-width: 700px) { | ||
.ooo-step__body { | .ooo-step__body { | ||
flex-direction: column; | flex-direction: column; | ||
| Line 901: | Line 937: | ||
max-width: 100%; | max-width: 100%; | ||
} | } | ||
} | } | ||