MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 1,012: | Line 1,012: | ||
font-size: 0.9rem; | font-size: 0.9rem; | ||
opacity: 0.85; | opacity: 0.85; | ||
} | |||
/* ========================================================= | |||
OOO BROWSER (Reusable left-list + right-details panel) | |||
Works for Buildings / Vehicles / Factory, etc. | |||
========================================================= */ | |||
.ooo-browser { | |||
display: flex; | |||
gap: 28px; | |||
align-items: flex-start; | |||
margin-top: 14px; | |||
} | |||
/* Left side list */ | |||
.ooo-browser__list { | |||
flex: 1; | |||
min-width: 220px; | |||
} | |||
/* Item button */ | |||
.ooo-browser__item { | |||
display: block; | |||
width: 100%; | |||
text-align: left; | |||
padding: 10px 12px; | |||
margin: 6px 0; | |||
border-radius: 10px; | |||
border: 1px solid var(--ooo-border); | |||
background: rgba(245,196,0,0.04); | |||
cursor: pointer; | |||
font: inherit; | |||
font-weight: 700; | |||
transition: 0.15s ease; | |||
} | |||
.ooo-browser__item:hover { | |||
border-color: rgba(245,196,0,0.55); | |||
background: rgba(245,196,0,0.07); | |||
} | |||
.ooo-browser__item.is-active { | |||
border-color: rgba(245,196,0,0.80); | |||
background: rgba(245,196,0,0.10); | |||
} | |||
/* Optional small subtitle under item label */ | |||
.ooo-browser__item small { | |||
display: block; | |||
margin-top: 2px; | |||
font-weight: 600; | |||
opacity: 0.75; | |||
} | |||
/* Right side panel */ | |||
.ooo-browser__panel { | |||
flex: 1; | |||
min-width: 280px; | |||
border-left: 1px solid var(--ooo-border); | |||
padding-left: 22px; | |||
} | |||
/* Panels (each item content) */ | |||
.ooo-browser__info { | |||
display: none; | |||
} | |||
.ooo-browser__info.is-active { | |||
display: block; | |||
} | |||
/* Mobile: stack */ | |||
@media (max-width: 900px) { | |||
.ooo-browser { | |||
flex-direction: column; | |||
gap: 16px; | |||
} | |||
.ooo-browser__panel { | |||
border-left: none; | |||
padding-left: 0; | |||
border-top: 1px solid var(--ooo-border); | |||
padding-top: 16px; | |||
} | |||
} | } | ||