/* This is utility css that can be used anywhere in the app It should be included on all app pages in all schemes */ /* * HTML5 standards-mode compatibility shim for legacy BML site chrome. * * The site moved from HTML 4.0 Transitional (quirks mode) to * (standards mode) as part of the apache2 modernization. * * Live A/B measurement (Chrome) of /profile rendered both ways shows two * concrete differences that affect legacy table-based layouts: * * 1. default vertical-align changed from `bottom` to `baseline`, * leaving ~4px of descender-space gap under any image in a cell. * * 2. Anonymous inline line-boxes in standards mode are at least * `line-height: normal` of the *containing element's* font-size * tall, even when the actual content is smaller (e.g. inside * a 16px cell, or a cell containing only ). In quirks * mode they shrink to fit the content's font-size. Force the * tighter behaviour for these specific cases. * * Scope to #IJ-sitepage-content-inner — the BML site-scheme container — * so user S2 journal layouts (which live outside this div) are unaffected. */ /* :not([align]) so images that author-specified an alignment (e.g. `align="absmiddle"`, common on legacy LJ-style toolbars and userpics) keep the browser-mapped vertical-align they expect. We're only trying to fix the unmarked-image case where standards mode adds ~4px of descender gap below baseline-aligned images. */ #IJ-sitepage-content-inner table img:not([align]) { vertical-align: bottom; } /* Spacer/decorative tables (the IJ-AccentBox*) build a rounded-rectangle border out of 1px dot images in the corner / edge cells. In quirks those cells collapsed to the image height; in standards the line-box gets padded to ~19px (line-height: normal of the cell's font), making the visual border bloated. Only the empty corner cells and the image-only edge cells need the override — text-bearing cells (e.g. the nav strip on /tools/recent_comments.bml's AccentBox2) must keep a real line-height or the text collapses on top of itself. `:empty` matches the corners, `:has(> img:only-child)` matches the dot-image edges. */ #IJ-sitepage-content-inner table.IJ-AccentBox1 td:empty, #IJ-sitepage-content-inner table.IJ-AccentBox2 td:empty, #IJ-sitepage-content-inner table.IJ-AccentBox1 td:has(> img:only-child), #IJ-sitepage-content-inner table.IJ-AccentBox2 td:has(> img:only-child) { line-height: 0; } /* * User bio content (and any other nested-table layout the bio wraps in *
) had compact rendering in quirks because the inline * / inside set the line-box height. In standards, the *containing * block*'s strut (the inner 's `line-height: normal` ~18.5px) wins * regardless of what the inlines are. Force a 1.0 line-height on the * inner-table cells so smaller inline content can shrink the line-box. * * The selector `table table td` targets only nested tables — the * userinfo profile table itself (which holds the User/Name/Website rows) * is the outer table and keeps `line-height: normal` so those rows stay * the prod-matching 28.5px tall. */ #IJ-sitepage-content-inner table table td, #IJ-sitepage-content-inner table table th { /* Tighter strut than `normal` (~18.5) so smaller inline content (, ) renders less padded, but generous enough that
spacing in user bios doesn't collapse. 1.0 here matches the cell's own font-size as the strut. */ line-height: 1; } /* and typically appear in compact "labels" or secondary text. Their own line-height should match their own font metric so a
-separated list rendered at fs=9 stacks tightly. */ #IJ-sitepage-content-inner small, #IJ-sitepage-content-inner font[size="1"] { line-height: 1; } /* .pkg class wraps enclosing block element around inner floated elements */ .pkg:after { content: " "; display: block; visibility: hidden; clear: both; height: 0.1px; font-size: 0.1em; line-height: 0; } .pkg { display: inline-block; } /* no ie mac \*/ * html .pkg { height: 1%; } .pkg[class] { height: auto; } .pkg { display: block; } /* */ /* form styles */ label.left { display: block; float: left; } input.text, textarea.text, select.select { margin: 0px 3px 0px 0px; padding: 2px 2px; background: #fff url(/img/input-bg.gif) repeat-x 0 -1px; border: 1px solid #bbb; border-top: 1px solid #999; border-left: 1px solid #999; } select.select { padding: 1px; } fieldset.nostyle { border: none; margin: 0; padding: 0; } input.create-account { font-size: 110%; color: #fff; margin: 0; background: #559A40; border: 2px solid #76AE65; border-bottom: 2px solid #447C33; border-right: 2px solid #447C33; } .detail { font-size: 90%; color: #444; } p.detail { margin: 0 0 10px 0; padding: 0; } h2.widget-header { margin: 0 0 6px 0; padding: 0 0 6px 0; border-bottom: 1px solid #ccc; } ul.detail li { font-size: 90%; } hr.hr { border: 0; width: 100%; color: #bbb; background-color: #bbb; height: 1px; } /* generic class for removing styling from ul */ ul.nostyle { list-style: none; margin: 0; padding: 0; } /* tables where rows alternate colors */ table.alternating-rows th { text-align: left; border-top: 1px solid #bbb; border-bottom: 1px solid #bbb; background-color: #ddd; padding: 6px 4px; } table.alternating-rows tr.altrow1 { background-color: #fff; } table.alternating-rows tr.altrow2 { background-color: #eee; } table.alternating-rows td { padding: 6px 4px; border-bottom: 1px solid #ccc; text-align: left; } /* columns for content layouts */ div.columns-2 .columns-2-left { float: left; width: 49%; } div.columns-2 .columns-2-right { float: right; width: 49%; } div.columns-2-r300 { width: 720px; } div.columns-2-r300 .columns-2-left { float: left; width: 405px; margin-right: 15px; } div.columns-2-r300 .columns-2-right { float: left; width: 300px; } /* default margin for widgets */ .appwidget { margin-bottom: 15px; position: relative; } .appwidget .more-link { position: absolute; right: 7px; top: 6px; font-size: 11px; text-decoration: none; padding-left: 10px; text-transform: lowercase; color: #333 !important; background: url('/img/arrow-double-blue.gif') no-repeat 0 60%; } .appwidget .more-link:hover { text-decoration: underline; } /* add this class to anything to make upgrade icon appear next to it */ .upgrade-account { padding-right: 18px; background: url('/horizon/upgrade-paid-icon.gif') no-repeat right 50%; } .arrow-link, .more-link { padding-left: 12px; background: url('/img/arrow-double-black.gif') no-repeat 0 50%; } /* Used to encapsualte message forms like Invite and Tell a Friend */ .message { border: 5px solid #eee; margin-bottom: 15px; } .message blockquote { margin: 0; border: 1px solid #aaa; padding: 15px; } .standout-border { border: 1px solid #bbb; padding: 6px; } .standout-background { background-color: #ddd; } /* Sidebars floated to the right */ div.right-sidebar { float: right; width: 300px; color: #000000; background-color: #ddd; border: 1px solid #bbb; margin: 10px; padding: 10px; } div.ad-sidebar { width: 300px; float: right; } .textbutton { color: #0000CC; cursor: pointer; }