MediaWiki:Common.css: Difference between revisions

← Older edit Newer edit →

@@ Line 1,018: / Line 1,018: @@
 /* =========================================================
-    OOO BROWSER — HARD LOCKED LAYOUT
+    OOO BROWSER (Stable simple layout)
     ========================================================= */
-.ooo-browser{
+.ooo-browser {
-   display:grid;
+   display:flex;
-  grid-template-columns:240px 1fr;
    gap:34px;
+  align-items:flex-start;
    margin-top:14px;
-  /* lock layout height */
-  max-height:calc(100vh - 120px);
 }
-/* LEFT MENU */
+/* Left item list */
 .ooo-browser__list{
-   position:sticky;
+   width:240px;
-   top:90px;
+   flex-shrink:0;
-  height:fit-content;
-}
-/* RIGHT PANEL */
-.ooo-browser__panel{
-  height:calc(100vh - 120px);
-  overflow-y:auto;
-  border-left:1px solid var(--ooo-border);
-  padding-left:24px;
-}
-/* panels */
-.ooo-browser__info{
-  display:none;
-}
-.ooo-browser__info.is-active{
-  display:block;
 }
-/* item buttons */
+/* Item buttons */
 .ooo-browser__item{
@@ Line 1,075: / Line 1,051: @@
    cursor:pointer;
    font-weight:700;
+  transition:.15s ease;
-  transition:.15s ease;
    position:relative;
 }
@@ Line 1,100: / Line 1,076: @@
 }
-/* mobile */
+/* Right panel */
+.ooo-browser__panel{
+  flex:1;
+  border-left:1px solid var(--ooo-border);
+  padding-left:24px;
+  max-width:520px;
+}
+.ooo-browser__panel .ooo-infobox{
+  margin:0;
+  float:none;
+  width:100%;
+}
+/* Panels */
+.ooo-browser__info{
+  display:none;
+}
+.ooo-browser__info.is-active{
+  display:block;
+}
+/* Mobile */
 @media (max-width:900px){
    .ooo-browser{
-     grid-template-columns:1fr;
+     flex-direction:column;
-    max-height:none;
    }
    .ooo-browser__panel{
-    height:auto;
-    overflow:visible;
      border-left:none;
      padding-left:0;
      border-top:1px solid var(--ooo-border);
      padding-top:16px;
-  }
-  .ooo-browser__list{
-    position:relative;
-    top:auto;
    }