MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary |
||
| Line 1,018: | Line 1,018: | ||
/* ========================================================= | /* ========================================================= | ||
OOO BROWSER ( | OOO BROWSER (Unified, Reusable Layout) | ||
Works for Buildings / Vehicles / Production / Ore, etc. | |||
========================================================= */ | ========================================================= */ | ||
.ooo-browser{ | .ooo-browser { | ||
display:flex; | display: flex; | ||
gap: | gap: 16px; /* small gap between list and panel */ | ||
align-items:flex-start; | align-items: flex-start; | ||
margin-top:14px; | margin-top: 14px; | ||
} | } | ||
/* LEFT LIST */ | /* LEFT LIST */ | ||
.ooo-browser__listwrap { | |||
position: sticky; | |||
top: 90px; | |||
align-self: flex-start; | |||
height: max-content; | |||
} | |||
.ooo-browser__list{ | .ooo-browser__list { | ||
width:240px; | width: 240px; /* fixed width for consistent list */ | ||
min-width:240px; | min-width: 240px; | ||
flex-shrink:0; | flex-shrink: 0; | ||
} | } | ||
/* RIGHT PANEL */ | /* RIGHT PANEL */ | ||
.ooo-browser__panel { | |||
.ooo-browser__panel{ | flex: 1; | ||
flex:1; | min-width: 0; /* ensures panel shrinks if window narrows */ | ||
min-width:0; | border-left: 1px solid var(--ooo-border); | ||
border-left:1px solid var(--ooo-border); | padding-left: 12px; /* small spacing from list */ | ||
padding-left: | box-sizing: border-box; | ||
} | } | ||
/* INFOBOX */ | /* INFOBOX */ | ||
.ooo-browser__panel .ooo-infobox { | |||
.ooo-browser__panel .ooo-infobox{ | width: 320px; | ||
width:320px; | max-width: 100%; | ||
max-width:100%; | margin: 0; | ||
margin:0; | float: none; | ||
float:none; | box-sizing: border-box; | ||
box-sizing:border-box; | |||
} | } | ||
/* Prevent tables | /* Prevent tables and long lines from breaking layout */ | ||
.ooo-browser__panel .ooo-infobox table { | |||
.ooo-browser__panel .ooo-infobox table{ | width: 100%; | ||
width:100%; | table-layout: fixed; | ||
table-layout:fixed; | |||
} | } | ||
.ooo-browser__panel .ooo-infobox td, | .ooo-browser__panel .ooo-infobox td, | ||
.ooo-browser__panel .ooo-infobox th{ | .ooo-browser__panel .ooo-infobox th { | ||
word-break:break-word; | word-break: break-word; | ||
} | } | ||
/* 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; | ||
margin: 6px 0; | |||
padding:10px 12px; | border-radius: 10px; | ||
margin:6px 0; | border: 1px solid var(--ooo-border); | ||
background: rgba(245,196,0,0.04); | |||
border-radius:10px; | cursor: pointer; | ||
border:1px solid var(--ooo-border); | font-weight: 700; | ||
background:rgba(245,196,0,0.04); | transition: .15s ease; | ||
position: relative; | |||
cursor:pointer; | |||
font-weight:700; | |||
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); | ||
} | } | ||
.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); | ||
} | } | ||
/* 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; | |||
} | } | ||
/* | /* PANEL CONTENT LAYOUT */ | ||
.ooo-item-top { | |||
display: flex; | |||
gap: 12px; /* spacing between infobox and description */ | |||
.ooo-item-top{ | align-items: flex-start; | ||
display:flex; | |||
gap: | |||
align-items:flex-start; | |||
} | } | ||
.ooo-item-top .ooo-infobox { | |||
.ooo-item-top .ooo-infobox{ | flex-shrink: 0; /* prevents infobox from shrinking */ | ||
flex-shrink:0; | |||
} | } | ||
.ooo-item-description { | |||
.ooo-item-description{ | flex: 1; | ||
flex:1; | line-height: 1.6; | ||
line-height:1.6; | |||
} | } | ||
.ooo-item-body { | |||
.ooo-item-body{ | margin-top: 16px; | ||
margin-top: | padding-top: 12px; | ||
padding-top: | border-top: 1px solid var(--ooo-border); | ||
border-top:1px solid var(--ooo-border); | max-width: 540px; | ||
max-width:540px; | line-height: 1.65; | ||
line-height:1.65; | |||
} | } | ||
/* | /* PANEL SECTION HEADINGS */ | ||
.ooo-section-heading { | |||
font-weight: 700; | |||
font-size: 1.15rem; | |||
.ooo-section-heading{ | margin: 14px 0 6px 0; | ||
font-weight:700; | padding-bottom: 4px; | ||
font-size:1.15rem; | border-bottom: 2px solid var(--ooo-accent); | ||
margin:14px 0 6px 0; | |||
padding-bottom:4px; | |||
border-bottom:2px solid var(--ooo-accent); | |||
} | } | ||
/* | /* MOBILE / NARROW SCREENS */ | ||
@media (max-width: 1000px) { | |||
.ooo-browser { | |||
flex-direction: column; | |||
@media (max-width:1000px){ | gap: 12px; | ||
.ooo-browser{ | |||
flex-direction:column; | |||
} | } | ||
.ooo-browser__list { | |||
.ooo-browser__list{ | width: 100%; | ||
width:100%; | min-width: 0; | ||
min-width:0; | |||
} | } | ||
.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: 12px; | ||
padding-top: | |||
} | } | ||
.ooo-item-top { | |||
.ooo-item-top{ | flex-direction: column; | ||
flex-direction:column; | |||
} | } | ||
.ooo-browser__panel .ooo-infobox { | |||
.ooo-browser__panel .ooo-infobox{ | width: 100%; | ||
width:100%; | |||
} | } | ||
} | } | ||