MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 1,019: | Line 1,019: | ||
/* ========================================================= | /* ========================================================= | ||
OOO BROWSER (Reusable left-list + right-details panel) | OOO BROWSER (Reusable left-list + right-details panel) | ||
Works for Buildings / Vehicles / Factory | Works for Buildings / Vehicles / Factory | ||
========================================================= */ | ========================================================= */ | ||
.ooo-browser { | .ooo-browser { | ||
display: flex; | display:flex; | ||
gap: 34px; | gap:34px; | ||
align-items: flex-start; | align-items:flex-start; | ||
margin-top: 14px; | margin-top:14px; | ||
} | |||
/* Sticky wrapper */ | |||
.ooo-browser__listwrap{ | |||
position:sticky; | |||
top:90px; | |||
height:max-content; | |||
} | } | ||
/* Left | /* Left list */ | ||
.ooo-browser__list { | .ooo-browser__list{ | ||
width: 240px; | width:240px; | ||
flex-shrink: 0; | flex-shrink:0; | ||
} | } | ||
/* Item button */ | /* Item button */ | ||
.ooo-browser__item { | .ooo-browser__item{ | ||
display: block; | display:block; | ||
width: 100%; | width:100%; | ||
text-align: left; | text-align:left; | ||
padding: 10px 12px; | padding:10px 12px; | ||
margin: 6px 0; | margin:6px 0; | ||
border-radius: 10px; | border-radius:10px; | ||
border: 1px solid var(--ooo-border); | border:1px solid var(--ooo-border); | ||
background: rgba(245,196,0,0.04); | background:rgba(245,196,0,0.04); | ||
cursor: pointer; | cursor:pointer; | ||
font: inherit; | font:inherit; | ||
font-weight: 700 | font-weight:700; | ||
position: relative; | transition:.15s ease; | ||
position:relative; | |||
} | } | ||
.ooo-browser__item:hover { | .ooo-browser__item:hover{ | ||
border-color: rgba(245,196,0,0.55); | border-color:rgba(245,196,0,0.55); | ||
background: rgba(245,196,0,0.07); | background:rgba(245,196,0,0.07); | ||
} | } | ||
.ooo-browser__item.is-active { | .ooo-browser__item.is-active{ | ||
border-color: rgba(245,196,0,0.80); | border-color:rgba(245,196,0,0.80); | ||
background: rgba(245,196,0,0.10); | background:rgba(245,196,0,0.10); | ||
} | } | ||
/* Arrow indicator | /* Arrow indicator */ | ||
.ooo-browser__item.is-active::after { | .ooo-browser__item.is-active::after{ | ||
content: "▶"; | content:"▶"; | ||
position: absolute; | position:absolute; | ||
right: 10px; | right:10px; | ||
top: 50%; | top:50%; | ||
transform: translateY(-50%); | transform:translateY(-50%); | ||
font-size: 14px; | font-size:14px; | ||
color: var(--ooo-accent); | color:var(--ooo-accent); | ||
} | } | ||
/* Optional subtitle */ | /* Optional subtitle */ | ||
.ooo-browser__item small { | .ooo-browser__item small{ | ||
display: block; | display:block; | ||
margin-top: 2px; | margin-top:2px; | ||
font-weight: 600; | font-weight:600; | ||
opacity: 0.75; | opacity:0.75; | ||
} | } | ||
/* Right | /* Right panel */ | ||
.ooo-browser__panel { | .ooo-browser__panel{ | ||
flex: 1; | flex:1; | ||
max-width: 520px; | max-width:520px; | ||
border-left: 1px solid var(--ooo-border); | border-left:1px solid var(--ooo-border); | ||
padding-left: 24px; | padding-left:24px; | ||
} | } | ||
.ooo-browser__panel .ooo-infobox { | .ooo-browser__panel .ooo-infobox{ | ||
margin: 0; | margin:0; | ||
float: none; | float:none; | ||
width: 100%; | width:100%; | ||
} | } | ||
/* Panels */ | /* Panels */ | ||
.ooo-browser__info { | .ooo-browser__info{ | ||
display: none; | display:none; | ||
} | } | ||
.ooo-browser__info.is-active { | .ooo-browser__info.is-active{ | ||
display: block; | display:block; | ||
} | } | ||
/* Mobile */ | /* Mobile */ | ||
@media (max-width: 900px) { | @media (max-width:900px){ | ||
.ooo-browser { | .ooo-browser{ | ||
flex-direction: column; | flex-direction:column; | ||
gap: 16px; | gap:16px; | ||
} | } | ||
.ooo-browser__panel { | .ooo-browser__panel{ | ||
border-left: none; | border-left:none; | ||
padding-left: 0; | padding-left:0; | ||
border-top: 1px solid var(--ooo-border); | border-top:1px solid var(--ooo-border); | ||
padding-top: 16px; | padding-top:16px; | ||
} | |||
.ooo-browser__listwrap{ | |||
position:relative; | |||
top:auto; | |||
} | } | ||
} | } | ||
| Line 1,291: | Line 1,302: | ||
border-radius:4px; | border-radius:4px; | ||
font-size:0.95rem; | font-size:0.95rem; | ||
} | } | ||