Out of Ore Wiki

MediaWiki:Common.css: Difference between revisions

← Older editNewer edit →
mNo edit summary
Tag: Manual revert
mNo edit summary
Line 1,018: Line 1,018:


/* =========================================================
/* =========================================================
   OOO BROWSER (Unified layout)
   OOO BROWSER (Reusable left-list + right-details panel)
  Works for Buildings / Vehicles / Factory, etc.
   ========================================================= */
   ========================================================= */


.ooo-browser {
.ooo-browser {
   display: flex;
   display: flex;
   gap: 12px; /* small spacing between list and panel */
   gap: 34px;
   align-items: flex-start;
   align-items: flex-start;
   margin-top: 14px;
   margin-top: 14px;
  flex-wrap: wrap; /* allows responsive stacking */
}
/* LEFT LIST */
.ooo-browser__listwrap {
  flex: 0 0 auto;
  position: sticky;
  top: 90px;
  align-self: flex-start;
}
}


/* Left side list */
.ooo-browser__list {
.ooo-browser__list {
   width: 240px;
   width: 240px;
  min-width: 240px;
   flex-shrink: 0;
   flex-shrink: 0;
}
}


/* RIGHT PANEL */
/* Item button */
.ooo-browser__panelwrap {
.ooo-browser__item {
   flex: 1 1 auto;
   display: block;
   min-width: 280px; /* prevents collapsing too small */
   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;
 
  position: relative;
}
}


.ooo-browser__panel {
.ooo-browser__item:hover {
   width: 100%;
   border-color: rgba(245,196,0,0.55);
   box-sizing: border-box;
   background: rgba(245,196,0,0.07);
}
}


/* INFOBOX inside panel */
.ooo-browser__item.is-active {
.ooo-browser__panel .ooo-infobox {
   border-color: rgba(245,196,0,0.80);
   width: auto;
   background: rgba(245,196,0,0.10);
  max-width: 100%;
   box-sizing: border-box;
}
}


/* Prevent tables inside infobox from breaking layout */
/* Arrow indicator for active item */
.ooo-browser__panel .ooo-infobox table {
.ooo-browser__item.is-active::after {
   width: 100%;
   content: "▶";
   table-layout: fixed;
  position: absolute;
 
  right: 10px;
  top: 50%;
   transform: translateY(-50%);
 
  font-size: 14px;
  color: var(--ooo-accent);
}
}


.ooo-browser__panel .ooo-infobox td,
/* Optional small subtitle under item label */
.ooo-browser__panel .ooo-infobox th {
.ooo-browser__item small {
   word-break: break-word;
   display: block;
  margin-top: 2px;
  font-weight: 600;
  opacity: 0.75;
}
}


/* PANEL CONTENT */
/* Right side panel */
.ooo-item-top {
.ooo-browser__panel {
   display: flex;
   flex: 1;
   gap: 12px; /* tiny spacing between infobox and description */
   max-width: 520px;
   align-items: flex-start;
 
   border-left: 1px solid var(--ooo-border);
  padding-left: 24px;
}
}


.ooo-item-top .ooo-infobox {
.ooo-browser__panel .ooo-infobox {
   flex-shrink: 0;
   margin: 0;
  float: none;
  width: 100%;
}
}


.ooo-item-description {
/* Panels (each item content) */
   flex: 1;
.ooo-browser__info {
  line-height: 1.6;
   display: none;
}
}


.ooo-item-body {
.ooo-browser__info.is-active {
   margin-top: 20px;
   display: block;
  padding-top: 18px;
  border-top: 1px solid var(--ooo-border);
  max-width: 540px;
  line-height: 1.65;
}
}


/* MOBILE / NARROW SCREENS */
/* Mobile: stack */
@media (max-width: 1000px) {
@media (max-width: 900px) {
   .ooo-browser {
   .ooo-browser {
     flex-direction: column;
     flex-direction: column;
     gap: 16px;
     gap: 16px;
  }
  .ooo-browser__listwrap,
  .ooo-browser__panelwrap {
    width: 100%;
   }
   }


Line 1,114: Line 1,125:
     padding-top: 16px;
     padding-top: 16px;
   }
   }
  .ooo-item-top {
    flex-direction: column;
  }
}
/* =========================================================
  OOO BROWSER STABLE LEFT COLUMN
  ========================================================= */
.ooo-browser__listwrap{
  position:sticky;
  top:90px;
  align-self:flex-start;
  height:max-content;
}
}


Line 1,244: Line 1,240:
.ooo-infobox-tabwrap .tabber__tab[aria-selected="true"]{
.ooo-infobox-tabwrap .tabber__tab[aria-selected="true"]{
   border-radius:0 !important;
   border-radius:0 !important;
}
/* =========================================================
  OOO ITEM PANEL LAYOUT (Reusable)
  ========================================================= */
/* top row: infobox + description */
.ooo-item-top{
  display:flex;
  gap:24px;
  align-items:flex-start;
}
/* description beside infobox */
.ooo-item-description{
  flex:1;
  max-width:460px;
  line-height:1.6;
}
/* bottom content area */
.ooo-item-body{
  margin-top:20px;
  padding-top:18px;
  border-top:1px solid var(--ooo-border);
  max-width:540px;
  line-height:1.65;
}
/* prevent infobox shrinking */
.ooo-item-top .ooo-infobox{
  flex-shrink:0;
}
/* notes block (optional) */
.ooo-item-notes{
  margin-bottom:16px;
  padding:10px 14px;
  border-left:4px solid var(--ooo-accent);
  background:rgba(245,196,0,0.08);
  border-radius:4px;
  font-size:0.95rem;
}
/* =========================================================
  OOO BROWSER STICKY ITEM LIST
  ========================================================= */
.ooo-browser__list{
  position: sticky;
  top: 80px;
  align-self: flex-start;
}
}
Retrieved from "https://wiki.outofore.com/index.php/MediaWiki:Common.css"