diff options
Diffstat (limited to 'shared/style/confirm.css')
| -rw-r--r-- | shared/style/confirm.css | 184 |
1 files changed, 184 insertions, 0 deletions
diff --git a/shared/style/confirm.css b/shared/style/confirm.css new file mode 100644 index 0000000..0acdca2 --- /dev/null +++ b/shared/style/confirm.css @@ -0,0 +1,184 @@ +/* ---------------------------------- + * Confirm + * ---------------------------------- */ + +/* Main dialog setup */ +form[role="dialog"][data-type="confirm"] { + background: + url(confirm/images/ui/pattern.png) repeat left top, + url(confirm/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: 1.5rem 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; + text-align: left; +} + +form[role="dialog"][data-type="confirm"]:before { + content: ""; + display: inline-block; + vertical-align: middle; + width: 1px; + height: 100%; + margin-left: -1px; +} + +form[role="dialog"][data-type="confirm"] > section { + font-weight: lighter; + font-size: 2.2rem; + color: #FAFAFA; + padding: 0 2.5rem 0 2rem; + -moz-box-sizing: padding-box; + width: 100%; + display: inline-block; + overflow-y: scroll; + max-height: 100%; + vertical-align: middle; + white-space: normal; +} + +form[role="dialog"][data-type="confirm"] h1 { + font-weight: normal; + font-size: 1.6rem; + line-height: 1em; + color: #fff; + margin: 0; + padding: 0; +} + +/* Menu & buttons setup */ +form[role="dialog"][data-type="confirm"] menu { + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 0.1rem rgba(255, 255, 255, 0.1); + background: #2d2d2d url(confirm/images/ui/pattern.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"][data-type="confirm"] menu button::-moz-focus-inner { + border: none; + outline: none; +} +form[role="dialog"][data-type="confirm"] 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; + background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom; + border: 0.1rem solid #a6a6a6; + border-radius: 0.3rem; + font: 500 1.6rem/3.8rem 'MozTT', Sans-serif; + color: #333; + text-align: center; + text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3); + text-decoration: none; + outline: none; +} + +/* Press (default & recommend) */ +form[role="dialog"][data-type="confirm"] menu button:active, +form[role="dialog"][data-type="confirm"] menu button.recommend:active, +a.recommend[role="button"]:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +/* Recommend */ +form[role="dialog"][data-type="confirm"] menu button.recommend { + background-image: url(buttons/images/ui/recommend.png); + background-color: #00caf2; + border-color: #008eab; +} + +/* Danger */ +form[role="dialog"][data-type="confirm"] menu button.danger, +a.danger[role="button"] { + background-image: url(buttons/images/ui/danger.png); + background-color: #b70404; + color: #fff; + text-shadow: none; + border-color: #820000; +} + +/* Danger Press */ +form[role="dialog"][data-type="confirm"] menu button.danger:active { + background-image: url(buttons/images/ui/danger-press.png); + background-color: #890707; +} + +/* Disabled */ +form[role="dialog"][data-type="confirm"] > menu > button[disabled] { + background: #5f5f5f; + color: #4d4d4d; + text-shadow: none; + border-color: #4d4d4d; + pointer-events: none; +} + + +form[role="dialog"][data-type="confirm"] menu button:last-child { + margin-left: 1rem; +} + +form[role="dialog"][data-type="confirm"] menu button, +form[role="dialog"][data-type="confirm"] menu button:first-child { + margin: 0; +} + +form[role="dialog"][data-type="confirm"] menu button { + width: calc((100% - 1rem) / 2); +} + +form[role="dialog"][data-type="confirm"] menu button.full { + width: 100%; +} + +/* Specific component code */ +form[role="dialog"][data-type="confirm"] p { + word-wrap: break-word; + margin: 1rem 0 0; + padding-top: 1rem; + border-top: 0.1rem solid #686868; +} + +form[role="dialog"][data-type="confirm"] p img { + float: left; + margin-right: 2rem; +} + +form[role="dialog"][data-type="confirm"] p strong { + font-weight: lighter; +} + +form[role="dialog"][data-type="confirm"] p small { + font-size: 1.4rem; + font-weight: normal; + color: #cbcbcb; + display: block; +} + |