MediaWiki:Common.css: Difference between revisions

mNo edit summary
mNo edit summary
Line 1,020: Line 1,020:
   OOO BROWSER (Reusable left-list + right-details panel)
   OOO BROWSER (Reusable left-list + right-details panel)
   Works for Buildings / Vehicles / Factory, etc.
   Works for Buildings / Vehicles / Factory, etc.
  Stable layout — prevents list shifting
   ========================================================= */
   ========================================================= */


.ooo-browser {
.ooo-browser {
   display: grid;
   display: flex;
  grid-template-columns: 240px 1fr;
   gap: 34px;
   gap: 34px;
   align-items: start;
   align-items: flex-start;
   margin-top: 14px;
   margin-top: 14px;
}
}
Line 1,034: Line 1,032:
.ooo-browser__list {
.ooo-browser__list {
   width: 240px;
   width: 240px;
  flex-shrink: 0;
}
}


Line 1,072: Line 1,071:
   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 small subtitle under item label */
/* Optional subtitle */
.ooo-browser__item small {
.ooo-browser__item small {
   display: block;
   display: block;
Line 1,091: Line 1,088:
/* Right side panel */
/* Right side panel */
.ooo-browser__panel {
.ooo-browser__panel {
  flex: 1;
   max-width: 520px;
   max-width: 520px;


Line 1,097: Line 1,095:
}
}


/* infobox inside panel */
.ooo-browser__panel .ooo-infobox {
.ooo-browser__panel .ooo-infobox {
   margin: 0;
   margin: 0;
Line 1,104: Line 1,101:
}
}


/* Panels (each item content) */
/* Panels */
.ooo-browser__info {
.ooo-browser__info {
   display: none;
   display: none;
Line 1,113: Line 1,110:
}
}


/* Mobile: stack */
/* Mobile */
@media (max-width: 900px) {
@media (max-width: 900px) {
   .ooo-browser {
   .ooo-browser {
     grid-template-columns: 1fr;
     flex-direction: column;
     gap: 16px;
     gap: 16px;
   }
   }