/** * @file * Generic theme-independent base styles. */ /** * Autocomplete. * * @see autocomplete.js */ /* Suggestion list */ #autocomplete { border: 1px solid; overflow: hidden; position: absolute; z-index: 100; } #autocomplete ul { list-style: none; list-style-image: none; margin: 0; padding: 0; } #autocomplete li { background: #fff; color: #000; cursor: default; white-space: pre; } /* Animated throbber */ .js input.form-autocomplete { background-image: url(../../misc/throbber.gif); background-position: 100% 2px; /* LTR */ background-repeat: no-repeat; } .js input.throbbing { background-position: 100% -18px; /* LTR */ } /** * Collapsible fieldsets. * * @see collapse.js */ .js fieldset.collapsed { border-bottom-width: 0; border-left-width: 0; border-right-width: 0; height: 1em; } .js fieldset.collapsed .fieldset-wrapper { display: none; } fieldset.collapsible { position: relative; } fieldset.collapsible .fieldset-legend { display: block; } /** * Resizable textareas. */ .form-textarea-wrapper textarea { display: block; margin: 0; width: 100%; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } .resize-none { resize: none; } .resize-vertical { resize: vertical; min-height: 2em; } .resize-horizontal { resize: horizontal; max-width: 100%; } .resize-both { resize: both; max-width: 100%; min-height: 2em; } /** * TableDrag behavior. * * @see tabledrag.js */ body.drag { cursor: move; } .draggable a.tabledrag-handle { cursor: move; float: left; /* LTR */ height: 1.7em; margin-left: -1em; /* LTR */ overflow: hidden; text-decoration: none; } a.tabledrag-handle:hover { text-decoration: none; } a.tabledrag-handle .handle { background: url(../../misc/draggable.png) no-repeat 6px 9px; height: 13px; margin: -0.4em 0.5em; /* LTR */ padding: 0.42em 0.5em; /* LTR */ width: 13px; } a.tabledrag-handle-hover .handle { background-position: 6px -11px; } div.indentation { float: left; /* LTR */ height: 1.7em; margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */ padding: 0.42em 0 0.42em 0.6em; /* LTR */ width: 20px; } div.tree-child { background: url(../../misc/tree.png) no-repeat 11px center; /* LTR */ } div.tree-child-last { background: url(../../misc/tree-bottom.png) no-repeat 11px center; /* LTR */ } div.tree-child-horizontal { background: url(../../misc/tree.png) no-repeat -11px center; } .tabledrag-toggle-weight-wrapper { text-align: right; /* LTR */ } /** * TableHeader behavior. * * @see tableheader.js */ table.sticky-header { background-color: #fff; margin-top: 0; z-index: 500; } /** * Progress behavior. * * @see progress.js */ /* Bar */ .progress .bar { background-color: #fff; border: 1px solid; } .progress .filled { background-color: #000; height: 1.5em; width: 5px; } .progress .percentage { float: right; /* LTR */ } /* Throbber */ .ajax-progress { display: inline-block; padding: 1px 5px 2px 5px; } .ajax-progress-throbber .throbber { background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px; display: inline; padding: 1px 5px 2px; } .ajax-progress-throbber .message { display: inline; padding: 1px 5px 2px; } tr .ajax-progress-throbber .throbber { margin: 0 2px; } .ajax-progress-bar { width: 16em; } /** * Inline items. */ .container-inline div, .container-inline label { display: inline; } /* Fieldset contents always need to be rendered as block. */ .container-inline .fieldset-wrapper { display: block; } /** * Prevent text wrapping. */ .nowrap { white-space: nowrap; } /** * For anything you want to hide on page load when JS is enabled, so * that you can use the JS to control visibility and avoid flicker. */ .js .js-hide { display: none; } /** * Hide elements from all users. * * Used for elements which should not be immediately displayed to any user. An * example would be a collapsible fieldset that will be expanded with a click * from a user. The effect of this class can be toggled with the jQuery show() * and hide() functions. */ .element-hidden { display: none; } /** * Hide elements visually, but keep them available for screen-readers. * * Used for information required for screen-reader users to understand and use * the site where visual display is undesirable. Information provided in this * manner should be kept concise, to avoid unnecessary burden on the user. * "!important" is used to prevent unintentional overrides. */ .element-invisible { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); left: 0; overflow: hidden; height: 1px; } /** * The .element-focusable class extends the .element-invisible class to allow * the element to be focusable when navigated to via the keyboard. */ .element-invisible.element-focusable:active, .element-invisible.element-focusable:focus { position: static !important; clip: auto; overflow: visible; height: auto; } /** * Float clearing. * * Based on the micro clearfix hack by Nicolas Gallagher, with the :before * pseudo selector removed to allow normal top margin collapse. * * @see http://nicolasgallagher.com/micro-clearfix-hack */ .clearfix:after { content: ""; display: table; clear: both; } /** * Block-level HTML5 display definition. * * Provides display values for browsers that don't recognize the new elements * and therefore display them inline by default. */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary { display: block; }