Advertisement
Lucent

Ptable autofit

Mar 20th, 2021
1,232
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.41 KB | None | 0 0
  1. body > *                    { padding: 0 min((100% - 100 * var(--aspect-ratio)) / 2, (100% - var(--min) / var(--sidebar-shrink) * var(--groupfactor) - var(--2margin)) / 2); /* from ol min-width */ }
  2. footer                      { margin: 0 calc(20vw + 2 * var(--2margin)); padding: 0; }
  3.  
  4. html                        { font-size: calc(var(--base-vw) * var(--aspect-ratio)); }
  5. .Slider,
  6. .DataRegion,                /* Next 3 get sidebar-shrink since they shrink when it's is active */
  7. .SearchConsole              { font-size: calc(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink)); }
  8.                             /* Include groupfactor since Table shrinks when it goes wide */
  9. ol                          { font-size: calc(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink) / var(--groupfactor));
  10.                             /* minfont already takes into account sidebar so undo it by multiplying so table is 768px wide minimum. */
  11.                               min-width: calc(var(--min) * var(--groupfactor) - 2 * var(--2margin)); }
  12.  
  13. :root                       { --aspect-ratio: 1vw; --square: calc(var(--square-vw) * var(--aspect-ratio)); /* no min/max, fit to width only */ }
  14. @supports (font-size: min(1vw, 1vh)) {
  15.     :root                       { --square: calc(var(--square-vw) * max(var(--min) / var(--sidebar-shrink) / 100, var(--aspect-ratio))); }
  16.     html                        { font-size: max(var(--base-vw) * var(--aspect-ratio), var(--minfont)); }
  17.     .Slider,
  18.     .DataRegion,                /* Next 3 get sidebar-shrink since they shrink when it's is active */
  19.     .SearchConsole              { font-size: max(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink), var(--minfont)); }
  20.     ol                          { font-size: max(var(--base-vw) * var(--aspect-ratio) * var(--sidebar-shrink) / var(--groupfactor), var(--minfont) * var(--sidebar-shrink)); }
  21.                                 /* minfont already takes into account sidebar so undo it by multiplying so table is 768px wide minimum. */
  22.     :root                       { --aspect-ratio: min(1vw, 1.17vh + (var(--groups) - 18) * 0.048vh); }  /* reach 1.9vh at group 32 */
  23.     .Sidebar                    { --aspect-ratio: min(1vw, 1.8vh + (var(--groups) - 18) * 0.1vh); }     /* reach 3.1vh at group 32 */
  24.     .Reset                      { --aspect-ratio: min(1vw, 1.48vh + (var(--groups) - 18) * 0.09vh); }   /* reach 2.75vh at group 32 */
  25. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement