diff options
Diffstat (limited to 'apps/system/style/bb/value_selector.css')
| -rw-r--r-- | apps/system/style/bb/value_selector.css | 221 |
1 files changed, 221 insertions, 0 deletions
diff --git a/apps/system/style/bb/value_selector.css b/apps/system/style/bb/value_selector.css new file mode 100644 index 0000000..dd120ef --- /dev/null +++ b/apps/system/style/bb/value_selector.css @@ -0,0 +1,221 @@ +/* ---------------------------------- + * Value selector (Single & Multiple) + * ---------------------------------- */ + +/* Main dialog setup */ +form[role="dialog"] { + background: url(value_selector/images/ui/pattern.png) repeat left top, url(value_selector/images/ui/gradient.png) no-repeat left top; + background-size: auto auto, 100% 100%; + /* We can't use shortand with background size because is not implemented yet: + https://bugzilla.mozilla.org/show_bug.cgi?id=570326; */ + overflow: hidden; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0 0 7rem; + font-family: "MozTT", Sans-serif; + font-size: 0; + /* Using font-size: 0; we avoid the unwanted visual space (about 3px) + created by white-spaces and break lines in the code betewen inline-block elements */ + color: #fff; +} + +form[role="dialog"]:before { + content: ""; + display: inline-block; + vertical-align: top; + width: 1px; + height: 100%; + margin-left: -1px; +} + +form[role="dialog"] > section { + padding: 0 1.5rem 0; + -moz-box-sizing: padding-box; + width: 100%; + height: 100%; + display: inline-block; + vertical-align: top; + white-space: normal; +} + +form[role="dialog"] h1 { + font: 1.6rem/1em 'MozTT', Sans-serif; + color: #fff; + border-bottom: 0.1rem solid #616262; + background: url(value_selector/images/ui/alpha.png) repeat 0 0; + margin: 0 -1.5rem; + padding: 2.5rem 3rem 1rem; +} + +/* Menu & buttons setup */ +form[role="dialog"] menu { + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 1px rgba(255, 255, 255, 0.1); + background: #2d2d2d url(value_selector/images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"] menu button { + width: 100%; + height: 3.8rem; + margin: 0 0 1rem; + padding: 0 1.5rem; + -moz-box-sizing: border-box; + display: inline-block; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + border-radius: 0.3rem; + outline: none; + border: none; + font-size: 1.6rem; + font-family: 'MozTT', Sans-serif; + font-weight: 600; + line-height: 3.8rem; + color: #fff; + text-shadow: -1px -1px 0 #830b0b; + text-align: center; + text-decoration: none; +} + +/* Reset & submit defaults */ +form[role="dialog"] menu button[type="reset"], +form[role="dialog"] menu button[type="submit"] { + text-shadow: 1px 1px 0 rgba(255,255,255,0.3); + color: #333; +} + +/* Reset */ +form[role="dialog"] menu button[type="reset"] { + background-image: url(value_selector/images/ui/button_reset.png); + background-color: #fafafa; + border: solid 1px #9f9f9f; +} + +/* Submit */ +form[role="dialog"] menu button[type="submit"] { + background-image: url(value_selector/images/ui/button_submit.png) ; + background-color: #00caf2; + border: 1px solid #00acce; +} + +/* Pressed state, reset & submit */ +form[role="dialog"] menu button[type="reset"]:active, +form[role="dialog"] menu button[type="submit"]:active { + border: solid 1px #008aaa; + background: #008aaa; + color: #333; +} + +/* Disabled, reset & submit) */ +form[role="dialog"] menu button[type="reset"][disabled], +form[role="dialog"] menu button[type="submit"][disabled] { + background-image: url(value_selector/images/ui/button_special_disabled.png); + background-color: transparent; + border: none; + color: #4a4a4a; + text-shadow: 0 1px 0 rgba(255, 255, 255, 0.2); +} + +form[role="dialog"] menu button:last-child { + margin-left: 1rem; +} + +form[role="dialog"] menu button, +form[role="dialog"] menu button:first-child { + margin: 0; +} + +form[role="dialog"] menu button { + width: -moz-calc((100% - 1rem) / 2); +} + +form[role="dialog"] menu button.full { + width: 100%; +} + +/* Specific component code */ +form[role="dialog"] [role="listbox"] { + position: relative; + padding: 0 1.5rem; + margin: 0 -1.5rem; + max-height: calc(100% - 5rem); + overflow: auto; + border-top: solid 0.1rem #222323; +} + +form[role="dialog"] .scrollable:before { + content: ""; + display: block; + position: absolute; + pointer-events: none; + top: 5.2rem; + left: 0; + right: 0; + bottom: 6.9rem; + background: url(value_selector/images/ui/shadow.png) repeat-x left top, url(value_selector/images/ui/shadow-invert.png) repeat-x left bottom; +} + +form[role="dialog"] [role="listbox"] li { + margin: 0; + padding-bottom: 1px; + height: 5.9rem; + list-style: none; + position: relative; + border-bottom: 1px solid #666; + font-weight: lighter; + font-size: 2.2rem; + line-height: 5.9rem; + color: #fff; + transition: background 0.2s ease; +} + +form[role="dialog"] [role="listbox"] li span { + padding: 0 1.5rem; +} + +form[role="dialog"] [role="listbox"] li:active, +form[role="dialog"] [role="listbox"] li:active label span { + background: #00ABCC; + color: #fff!important; +} + +form[role="dialog"] [role="listbox"] li input { + position: absolute; + left: 0; + top: 0; + opacity: 0; + pointer-events: none; +} + +form[role="dialog"] [role="listbox"] li input:checked + span, +form[role="dialog"] [role="listbox"] li[aria-checked="true"] span { + color: #00abcd; + background: url(value_selector/images/icons/checked.png) content-box right center no-repeat; +} + +form[role="dialog"] [role="listbox"] li a, +form[role="dialog"] [role="listbox"] li label { + border-bottom: 1px solid #000; + outline: none; +} + +form[role="dialog"] [role="listbox"] li a, +form[role="dialog"] [role="listbox"] li label, +form[role="dialog"] [role="listbox"] li label span { + text-decoration: none; + display: block; + color: #fff; +} |