MediaWiki:Common.css: Difference between revisions

mNo edit summary
mNo edit summary
Line 1,023: Line 1,023:
.ooo-browser {
.ooo-browser {
   display: flex;
   display: flex;
   gap: 20px; /* small spacing between list and panel */
   gap: 12px; /* small spacing between list and panel */
   align-items: flex-start;
   align-items: flex-start;
   margin-top: 14px;
   margin-top: 14px;
Line 1,046: Line 1,046:
.ooo-browser__panelwrap {
.ooo-browser__panelwrap {
   flex: 1 1 auto;
   flex: 1 1 auto;
   min-width: 300px; /* prevents collapsing too small */
   min-width: 280px; /* prevents collapsing too small */
}
}


.ooo-browser__panel {
.ooo-browser__panel {
   width: 100%;
   width: 100%;
  border-left: 1px solid var(--ooo-border);
  padding-left: 16px;
   box-sizing: border-box;
   box-sizing: border-box;
}
}
Line 1,072: Line 1,070:
.ooo-browser__panel .ooo-infobox th {
.ooo-browser__panel .ooo-infobox th {
   word-break: break-word;
   word-break: break-word;
}
/* 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-weight: 700;
  transition: .15s ease;
  position: relative;
}
.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);
}
.ooo-browser__item.is-active::after {
  content: "▶";
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: var(--ooo-accent);
}
/* PANELS */
.ooo-browser__info {
  display: none;
}
.ooo-browser__info.is-active {
  display: block;
}
}


Line 1,141: Line 1,094:
   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;
  margin: 14px 0 6px 0;
  padding-bottom: 4px;
  border-bottom: 2px solid var(--ooo-accent);
}
}


/* MOBILE / NARROW SCREENS */
/* MOBILE / NARROW SCREENS */
@media (max-width: 1000px) {
@media (max-width: 1000px) {
   .ooo-browser {
   .ooo-browser {
     flex-direction: column;
     flex-direction: column;