MediaWiki:Common.css: Difference between revisions
mNo edit summary |
mNo edit summary Tag: Reverted |
||
| Line 1,018: | Line 1,018: | ||
/* ========================================================= | /* ========================================================= | ||
OOO BROWSER (Unified | OOO BROWSER (Unified Layout + Items + Panel) | ||
========================================================= */ | ========================================================= */ | ||
| Line 1,029: | Line 1,029: | ||
} | } | ||
/* LEFT LIST */ | /* ================= LEFT LIST ================= */ | ||
.ooo-browser__listwrap { | .ooo-browser__listwrap { | ||
flex: 0 0 auto; | flex: 0 0 auto; | ||
| Line 1,043: | Line 1,043: | ||
} | } | ||
/* RIGHT PANEL */ | /* ================= RIGHT PANEL ================= */ | ||
.ooo-browser__panelwrap { | .ooo-browser__panelwrap { | ||
flex: 1 1 auto; | flex: 1 1 auto; | ||
min-width: 280px; /* prevents collapsing too small */ | min-width: 280px; /* prevents panel from collapsing too small */ | ||
} | } | ||
| Line 1,052: | Line 1,052: | ||
width: 100%; | width: 100%; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
border-left: 1px solid var(--ooo-border); | |||
padding-left: 16px; | |||
} | } | ||
| Line 1,072: | Line 1,074: | ||
} | } | ||
/* PANEL CONTENT */ | /* ================= 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; | |||
} | |||
/* ================= PANEL CONTENT ================= */ | |||
.ooo-item-top { | .ooo-item-top { | ||
display: flex; | display: flex; | ||
gap: 12px; /* | gap: 12px; /* spacing between infobox and description */ | ||
align-items: flex-start; | align-items: flex-start; | ||
} | } | ||
| Line 1,096: | Line 1,143: | ||
} | } | ||
/* MOBILE / NARROW SCREENS */ | /* ================= 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 ================= */ | |||
@media (max-width: 1000px) { | @media (max-width: 1000px) { | ||
.ooo-browser { | .ooo-browser { | ||
flex-direction: column; | flex-direction: column; | ||