diff options
Diffstat (limited to 'shared/style/action_menu.css')
| -rw-r--r-- | shared/style/action_menu.css | 151 |
1 files changed, 151 insertions, 0 deletions
diff --git a/shared/style/action_menu.css b/shared/style/action_menu.css new file mode 100644 index 0000000..4d01649 --- /dev/null +++ b/shared/style/action_menu.css @@ -0,0 +1,151 @@ +/* ---------------------------------- + * Action menu + * ---------------------------------- */ + +/* Main dialog setup */ +form[role="dialog"][data-type="action"], +form[role="dialog"][data-type="object"] { + background: + url(action_menu/images/ui/pattern.png) repeat left top, + url(action_menu/images/ui/gradient.png) no-repeat left top / 100% 100%; + overflow: hidden; + position: fixed; + z-index: 100; + top: 0; + left: 0; + right: 0; + bottom: 0; + padding: 0 0 7rem; + font-family: "MozTT", Sans-serif; + /** + * Using "font-size: 0" to avoid the unwanted visual space (about 3px) created + * by white spaces and line breaks in the code between inline-block elements. + */ + font-size: 0; + color: #fff; +} + +form[role="dialog"][data-type="action"]:before, +form[role="dialog"][data-type="object"]:before { + content: ''; + display: inline-block; + vertical-align: top; + width: 1px; + height: 100%; + margin-left: -1px; +} + +form[role="dialog"][data-type="action"] > header:first-child, +form[role="dialog"][data-type="object"] > header:first-child { + -moz-box-sizing: padding-box; + width: 100%; + display: inline-block; + vertical-align: top; + white-space: normal; + font: 1.6rem/1em 'MozTT', Sans-serif; + color: #fff; + border-bottom: 0.1rem solid #616262; + background: url(action_menu/images/ui/alpha.png) repeat 0 0; + padding: 2rem 3rem 0 3rem; + height: 5rem; + -moz-box-sizing: border-box; +} + +form[role="dialog"][data-type="action"] > header:after, +form[role="dialog"][data-type="object"] > header:after { + content: ''; + position: absolute; + width: 100%; + background: #222323; + height: 0.1rem; + left: 0; + top: 5rem; +} + +/* Specific component code */ +form[role="dialog"][data-type="action"] > menu, +form[role="dialog"][data-type="object"] > menu { + margin: 0; + padding: 0; + width: auto; + border: none; + background: none; + position: absolute; + left: 0; + right: 0; + bottom: 0; +} + +form[role="dialog"][data-type="action"] > menu > button, +form[role="dialog"][data-type="object"] > menu > button { + width: calc(100% - 3rem); + height: 4rem; + -moz-box-sizing: border-box; + vertical-align: middle; + text-overflow: ellipsis; + white-space: nowrap; + overflow: hidden; + font-family: 'MozTT', Sans-serif; + font-weight: normal; + line-height: 4rem; + outline: none; + font-size: 1.4rem; + color: #fff; + text-shadow: none; + text-align: left; + padding: 0 1rem; + margin: 0 1.5rem 1rem 1.5rem; + background: #5f5f5f padding-box; + border-radius: 0.2rem; + border: none; +} + +form[role="dialog"][data-type="action"] > menu > button:last-child, +form[role="dialog"][data-type="object"] > menu > button:last-child { + text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3); + color: #333; + font-weight: 500; + background: #fafafa url(buttons/images/ui/default.png) repeat-x left bottom; + border: solid 0.1rem #a6a6a6; + margin: 2.5rem 1.5rem 1.5rem 1.5rem; + text-align: center; + font-size: 1.6rem; +} + +form[role="dialog"][data-type="action"] > menu > button:last-child:before, +form[role="dialog"][data-type="object"] > menu > button:last-child:before { + content: ''; + position: absolute; + width: 100%; + background: url(action_menu/images/ui/pattern.png) repeat scroll left top #2D2D2D; + height: 7rem; + left: 0; + bottom: 0; + z-index: -1; + border-top: 0.1rem solid rgba(255, 255, 255, 0.1); +} + +/* Press state */ +form[role="dialog"][data-type="action"] > menu > button:active, +form[role="dialog"][data-type="object"] > menu > button:active { + background-color: #006f86; + color: #333; + text-shadow: 0 0.1rem 0 rgba(255, 255, 255, 0.25); +} + +form[role="dialog"][data-type="action"] > menu > button:last-child:active, +form[role="dialog"][data-type="object"] > menu > button:last-child:active { + border: solid 0.1rem #008aaa; + background: #008aaa; + color: #333; +} + +/* Disabled */ +form[role="dialog"][data-type="action"] > menu > button[disabled], +form[role="dialog"][data-type="object"] > menu > button[disabled] { + background: #4d4d4d; + color: #333; + text-shadow: none; + border: none; + pointer-events: none; +} |