diff options
Diffstat (limited to 'shared/style/edit_mode.css')
| -rw-r--r-- | shared/style/edit_mode.css | 238 |
1 files changed, 238 insertions, 0 deletions
diff --git a/shared/style/edit_mode.css b/shared/style/edit_mode.css new file mode 100644 index 0000000..28f5439 --- /dev/null +++ b/shared/style/edit_mode.css @@ -0,0 +1,238 @@ +/* ---------------------------------- + * Edit mode + * ---------------------------------- */ + +form[role="dialog"][data-type="edit"] { + overflow: hidden; + position: absolute; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + white-space: nowrap; + font-family: "MozTT", Sans-serif; + color: #fff; + pointer-events: none; +} + +/* Header */ +form[role="dialog"][data-type="edit"] header { + pointer-events: auto; + position: relative; + z-index: 10; + padding: 0; + height: 5rem; + color: #fff; + background: url(edit_mode/images/ui/alpha.png) repeat 0 0; + border: none; +} + +form[role="dialog"][data-type="edit"] header:after { + content: ""; + display: block; + height: 0.3rem; + position: absolute; + top: 100%; + left: 0; + right: 0; + background: url(edit_mode/images/ui/shadow.png) repeat-x 0 0; + background-size: auto 100%; +} + +form[role="dialog"][data-type="edit"] header h1 { + font: 2.5rem/5rem "MozTT", Sans-serif; + text-align: left; + color: #fff; + white-space: nowrap; + text-overflow: ellipsis; + display: block; + overflow: hidden; + margin: 0 0 0 3rem; + height: 100% +} + +form[role="dialog"][data-type="edit"] header button { + border: none; + background: none; + padding: 0; + overflow: hidden; + font: normal 1.4rem/1.1em "MozTT", Sans-serif; + color: #fff; + border-radius: 0; +} + +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] { + height: 100%; + float: right; + margin: 0; + padding: 0; +} + +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button { + height: 5rem; + min-width: 5rem; + width: auto; + margin-bottom: 0; + border-radius: 0; + line-height: 5rem; + float: left; + font-weight: normal; + background: none; + padding: 0 1.75rem; + -moz-box-sizing: border-box; + text-align: center; + text-shadow: none; + position: relative; + z-index: 5; +} + +form[role="dialog"][data-type="edit"] header menu button { + color: #fff; + border: none; +} + +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button:last-child { + background: url(edit_mode/images/ui/separator.png) no-repeat left center; + margin-left: -0.2rem; + z-index: 1; +} + +/* Press state */ +form[role="dialog"][data-type="edit"] header button:active .icon:after, +form[role="dialog"][data-type="edit"] header menu[type="toolbar"] button:active { + background: #008aaa !important; + transition: background 0.2s ease; + color: #fff; +} + +form[role="dialog"][data-type="edit"] header button:first-letter { + text-transform: uppercase; +} + +form[role="dialog"][data-type="edit"] header > button { + position: absolute; + left: 0; + width: 4rem; + height: 5rem; + background: url(edit_mode/images/ui/separator-large.png) no-repeat 2rem center; + overflow: hidden; + text-align: center; +} + +form[role="dialog"][data-type="edit"] header > button span { + background: url(edit_mode/images/icons/close.png) no-repeat center center; + overflow: visible; + font: 0/0 a; + position: static; + margin-left: -2rem; + height: 4.9rem; + display: block; +} + +form[role="dialog"][data-type="edit"] header > button span:after { + content: ""; + position: absolute; + left: 0; + top: 0; + z-index: -1; + width: 2rem; + height: 4.9rem; +} + +/* Menu */ +form[role="dialog"][data-type="edit"] > menu { + pointer-events: auto; + white-space: nowrap; + margin: 0; + padding: 1.5rem; + border-top: solid 0.1rem rgba(255, 255, 255, 0.1); + background: url(edit_mode/images/ui/alpha.png) repeat left top; + display: block; + overflow: hidden; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"][data-type="edit"] 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(edit_mode/images/ui/default.png) repeat-x left bottom; + border: 0.1rem solid #a6a6a6; + border-radius: 0.3rem; + font-size: 1.6rem; + font-family: 'MozTT', Sans-serif; + font-weight: 500; + line-height: 3.8rem; + 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="edit"] menu button:active, +form[role="dialog"][data-type="edit"] menu button.recommend:active { + border-color: #008aaa; + background: #008aaa; + color: #333; +} + +/* Recommend */ +form[role="dialog"][data-type="edit"] menu button.recommend{ + background-image: url(edit_mode/images/ui/recommend.png); + background-color: #00caf2; + border-color: #008eab; +} + +/* Danger */ +form[role="dialog"][data-type="edit"] menu button.danger{ + background-image: url(edit_mode/images/ui/danger.png); + background-color: #b70404; + color: #fff; + text-shadow: none; + border-color: #820000; +} + +/* Danger Press */ +form[role="dialog"][data-type="edit"] menu button.danger:active{ + background-image: url(edit_mode/images/ui/danger-press.png); + background-color: #890707; +} + +/* Disabled */ +form[role="dialog"][data-type="edit"] > menu > button[disabled] { + background: #5f5f5f; + color: #4d4d4d; + text-shadow: none; + border-color: #4d4d4d; + pointer-events: none; +} + +form[role="dialog"][data-type="edit"] menu button:last-child { + margin-left: 1rem; +} + +form[role="dialog"][data-type="edit"] menu button, +form[role="dialog"][data-type="edit"] menu button:first-child { + margin: 0; +} + +form[role="dialog"][data-type="edit"] menu button { + width: calc((100% - 1rem) / 2); +} + +form[role="dialog"][data-type="edit"] menu button.full { + width: 100%; +} |