306 lines
6.0 KiB
CSS
306 lines
6.0 KiB
CSS
/* $Id$ */
|
|
|
|
/**
|
|
* Autocomplete
|
|
*/
|
|
/* Suggestion list */
|
|
#autocomplete {
|
|
position: absolute;
|
|
border: 1px solid;
|
|
overflow: hidden;
|
|
z-index: 100;
|
|
}
|
|
#autocomplete ul {
|
|
margin: 0;
|
|
padding: 0;
|
|
list-style: none;
|
|
list-style-image: none;
|
|
}
|
|
#autocomplete li {
|
|
background: #fff;
|
|
color: #000;
|
|
white-space: pre;
|
|
cursor: default;
|
|
}
|
|
#autocomplete li.selected {
|
|
background: #0072b9;
|
|
color: #fff;
|
|
}
|
|
/* Animated throbber */
|
|
html.js input.form-autocomplete {
|
|
background-image: url(../../misc/throbber.gif);
|
|
background-repeat: no-repeat;
|
|
background-position: 100% 2px; /* LTR */
|
|
}
|
|
html.js input.throbbing {
|
|
background-position: 100% -18px; /* LTR */
|
|
}
|
|
|
|
/**
|
|
* Collapsing fieldsets
|
|
*/
|
|
html.js fieldset.collapsed {
|
|
border-bottom-width: 0;
|
|
border-left-width: 0;
|
|
border-right-width: 0;
|
|
height: 1em;
|
|
}
|
|
html.js fieldset.collapsed .fieldset-wrapper {
|
|
display: none;
|
|
}
|
|
fieldset.collapsible {
|
|
position: relative;
|
|
}
|
|
fieldset.collapsible .fieldset-legend {
|
|
display: block;
|
|
}
|
|
html.js fieldset.collapsible .fieldset-legend {
|
|
padding-left: 15px; /* LTR */
|
|
background: url(../../misc/menu-expanded.png) 5px 65% no-repeat; /* LTR */
|
|
}
|
|
html.js fieldset.collapsed .fieldset-legend {
|
|
background-image: url(../../misc/menu-collapsed.png); /* LTR */
|
|
background-position: 5px 50%; /* LTR */
|
|
}
|
|
.fieldset-legend span.summary {
|
|
font-size: 0.9em;
|
|
color: #999;
|
|
margin-left: 0.5em;
|
|
}
|
|
|
|
/**
|
|
* Resizable textareas
|
|
*/
|
|
.form-textarea-wrapper textarea {
|
|
margin: 0;
|
|
width: 100%;
|
|
display: block;
|
|
-webkit-box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
box-sizing: border-box;
|
|
}
|
|
.resizable-textarea .grippie {
|
|
height: 9px;
|
|
overflow: hidden;
|
|
background: #eee url(../../misc/grippie.png) no-repeat center 2px;
|
|
border: 1px solid #ddd;
|
|
border-top-width: 0;
|
|
cursor: s-resize;
|
|
}
|
|
|
|
/**
|
|
* Table drag and drop
|
|
*/
|
|
body.drag {
|
|
cursor: move;
|
|
}
|
|
.draggable a.tabledrag-handle {
|
|
cursor: move;
|
|
float: left; /* LTR */
|
|
height: 1.7em;
|
|
margin: -0.4em 0 -0.4em -0.5em; /* LTR */
|
|
padding: 0.42em 1.5em 0.42em 0.5em; /* LTR */
|
|
text-decoration: none;
|
|
}
|
|
a.tabledrag-handle:hover {
|
|
text-decoration: none;
|
|
}
|
|
a.tabledrag-handle .handle {
|
|
margin-top: 4px;
|
|
height: 13px;
|
|
width: 13px;
|
|
background: url(../../misc/draggable.png) no-repeat 0 0;
|
|
}
|
|
a.tabledrag-handle-hover .handle {
|
|
background-position: 0 -20px;
|
|
}
|
|
div.indentation {
|
|
width: 20px;
|
|
height: 1.7em;
|
|
margin: -0.4em 0.2em -0.4em -0.4em; /* LTR */
|
|
padding: 0.42em 0 0.42em 0.6em; /* LTR */
|
|
float: left; /* LTR */
|
|
}
|
|
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;
|
|
}
|
|
|
|
/**
|
|
* Progress bar
|
|
*/
|
|
.progress {
|
|
font-weight: bold;
|
|
}
|
|
.progress .bar {
|
|
border-radius: 3px;
|
|
-moz-border-radius: 3px;
|
|
-webkit-border-radius: 3px;
|
|
background: #ccc;
|
|
border: 1px solid #666;
|
|
margin: 0 0.2em;
|
|
}
|
|
.progress .filled {
|
|
background: #0072b9 url(../../misc/progress.gif);
|
|
height: 1.5em;
|
|
width: 5px;
|
|
}
|
|
.progress .percentage {
|
|
float: right; /* LTR */
|
|
}
|
|
.progress-disabled {
|
|
float: left; /* LTR */
|
|
}
|
|
.ajax-progress {
|
|
float: left; /* LTR */
|
|
}
|
|
.ajax-progress .throbber {
|
|
width: 15px;
|
|
height: 15px;
|
|
margin: 2px;
|
|
background: transparent url(../../misc/throbber.gif) no-repeat 0px -18px;
|
|
float: left; /* LTR */
|
|
}
|
|
tr .ajax-progress .throbber {
|
|
margin: 0 2px;
|
|
}
|
|
.ajax-progress-bar {
|
|
width: 16em;
|
|
}
|
|
|
|
/**
|
|
* Multiselect form
|
|
*/
|
|
dl.multiselect dd,
|
|
dl.multiselect dd .form-item,
|
|
dl.multiselect dd select {
|
|
font-family: inherit;
|
|
font-size: inherit;
|
|
width: 14em;
|
|
}
|
|
dl.multiselect dt,
|
|
dl.multiselect dd {
|
|
float: left; /* LTR */
|
|
line-height: 1.75em;
|
|
padding: 0;
|
|
margin: 0 1em 0 0; /* LTR */
|
|
}
|
|
dl.multiselect .form-item {
|
|
height: 1.75em;
|
|
margin: 0;
|
|
}
|
|
|
|
/**
|
|
* Password strength indicator
|
|
*/
|
|
#password-strength {
|
|
width: 17em;
|
|
float: right; /* LTR */
|
|
margin-top: 1.4em;
|
|
}
|
|
.password-strength-title {
|
|
display: inline;
|
|
}
|
|
#password-strength-text {
|
|
float: right; /* LTR */
|
|
font-weight: bold;
|
|
}
|
|
#password-indicator {
|
|
background-color: #C4C4C4;
|
|
height: 0.3em;
|
|
width: 100%;
|
|
}
|
|
#password-indicator div {
|
|
height: 100%;
|
|
width: 0%;
|
|
background-color: #47C965;
|
|
}
|
|
input.password-confirm,
|
|
input.password-field {
|
|
width: 16em;
|
|
margin-bottom: 0.4em;
|
|
}
|
|
div.password-confirm {
|
|
display: inline;
|
|
padding-left: 1em;
|
|
}
|
|
div.form-item div.password-suggestions {
|
|
padding: 0.2em 0.5em;
|
|
margin: 0.7em 0;
|
|
width: 38.5em;
|
|
border: 1px solid #B4B4B4;
|
|
}
|
|
div.password-suggestions ul {
|
|
margin-bottom: 0;
|
|
}
|
|
.password-parent {
|
|
margin: 0;
|
|
width: 34.3em;
|
|
}
|
|
|
|
/**
|
|
* Password confirmation checker
|
|
*/
|
|
.confirm-parent {
|
|
margin: 0;
|
|
}
|
|
div.password-confirm {
|
|
visibility: hidden;
|
|
}
|
|
|
|
/**
|
|
* Inline items (need to override above)
|
|
*/
|
|
.container-inline div,
|
|
.container-inline label {
|
|
display: inline;
|
|
}
|
|
/* Fieldset contents always need to be rendered as block. */
|
|
.container-inline .fieldset-wrapper {
|
|
display: block;
|
|
}
|
|
|
|
.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.
|
|
*/
|
|
html.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. Must
|
|
* not be used for focusable elements (such as links and form elements) as this
|
|
* causes issues for keyboard only or voice recognition users.
|
|
*/
|
|
.element-invisible {
|
|
height: 0;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
}
|