| /* |
| * |
| * Licensed to the Apache Software Foundation (ASF) under one |
| * or more contributor license agreements. See the NOTICE file |
| * distributed with this work for additional information |
| * regarding copyright ownership. The ASF licenses this file |
| * to you under the Apache License, Version 2.0 (the |
| * "License"); you may not use this file except in compliance |
| * with the License. You may obtain a copy of the License at |
| * |
| * http://www.apache.org/licenses/LICENSE-2.0 |
| * |
| * Unless required by applicable law or agreed to in writing, |
| * software distributed under the License is distributed on an |
| * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY |
| * KIND, either express or implied. See the License for the |
| * specific language governing permissions and limitations |
| * under the License. |
| * |
| */ |
| |
| /* Main dialog setup */ |
| form[role="dialog"] { |
| background: |
| url(../img/pattern.png) repeat left top, |
| url(../img/gradient.png) no-repeat left top / 100% 100%; |
| 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"]:before { |
| content: ""; |
| display: inline-block; |
| vertical-align: middle; |
| width: 0.1rem; |
| height: 100%; |
| margin-left: -0.1rem; |
| } |
| |
| form[role="dialog"] > section { |
| font-weight: lighter; |
| font-size: 1.8rem; |
| color: #FAFAFA; |
| padding: 0 1.5rem; |
| -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"] h1 { |
| font-weight: normal; |
| font-size: 1.6rem; |
| line-height: 1.5em; |
| color: #fff; |
| margin: 0; |
| padding: 0 1.5rem 1rem; |
| border-bottom: 0.1rem solid #686868; |
| } |
| |
| /* Menu & buttons setup */ |
| form[role="dialog"] menu { |
| margin: 0; |
| padding: 1.5rem; |
| padding-bottom: 0.5rem; |
| border-top: solid 0.1rem rgba(255, 255, 255, 0.1); |
| background: #2d2d2d url(../img/pattern.png) repeat left top; |
| display: block; |
| overflow: hidden; |
| position: absolute; |
| left: 0; |
| right: 0; |
| bottom: 0; |
| text-align: center; |
| } |
| |
| form[role="dialog"] menu button::-moz-focus-inner { |
| border: none; |
| outline: none; |
| } |
| form[role="dialog"] menu button { |
| width: 100%; |
| height: 2.4rem; |
| 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(../img/default.png) repeat-x left bottom/ auto 100%; |
| border: 0.1rem solid #a6a6a6; |
| border-radius: 0.3rem; |
| font: 500 1.2rem/2.4rem '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"] menu button:active, |
| form[role="dialog"] menu button.recommend:active, |
| a.recommend[role="button"]:active { |
| border-color: #008aaa; |
| color: #333; |
| } |
| |
| /* Recommend */ |
| form[role="dialog"] menu button.recommend { |
| background-image: url(../img/recommend.png); |
| background-color: #00caf2; |
| border-color: #008eab; |
| } |
| |
| /* Danger */ |
| form[role="dialog"] menu button.danger, |
| a.danger[role="button"] { |
| background-image: url(../img/danger.png); |
| background-color: #b70404; |
| color: #fff; |
| text-shadow: none; |
| border-color: #820000; |
| } |
| |
| /* Danger Press */ |
| form[role="dialog"] menu button.danger:active { |
| background-image: url(../img/danger-press.png); |
| background-color: #890707; |
| } |
| |
| /* Disabled */ |
| form[role="dialog"] > menu > button[disabled] { |
| background: #5f5f5f; |
| color: #4d4d4d; |
| text-shadow: none; |
| border-color: #4d4d4d; |
| pointer-events: none; |
| } |
| |
| |
| form[role="dialog"] menu button:nth-child(even) { |
| margin-left: 1rem; |
| } |
| |
| form[role="dialog"] menu button, |
| form[role="dialog"] menu button:nth-child(odd) { |
| margin: 0 0 1rem 0; |
| } |
| |
| form[role="dialog"] menu button { |
| width: calc((100% - 1rem) / 2); |
| } |
| |
| form[role="dialog"] menu button.full { |
| width: 100%; |
| } |
| |
| /* Specific component code */ |
| form[role="dialog"] p { |
| word-wrap: break-word; |
| margin: 1rem 0 0; |
| padding: 0 1.5rem 1rem; |
| line-height: 3rem; |
| } |
| |
| form[role="dialog"] p img { |
| float: left; |
| margin-right: 2rem; |
| } |
| |
| form[role="dialog"] p strong { |
| font-weight: lighter; |
| } |
| |
| form[role="dialog"] p small { |
| font-size: 1.4rem; |
| font-weight: normal; |
| color: #cbcbcb; |
| display: block; |
| } |
| |
| form[role="dialog"] dl { |
| border-top: 0.1rem solid #686868; |
| margin: 1rem 0 0; |
| overflow: hidden; |
| padding-top: 1rem; |
| font-size: 1.6rem; |
| line-height: 2.2rem; |
| } |
| |
| form[role="dialog"] dl > dt { |
| clear: both; |
| float: left; |
| width: 7rem; |
| padding-left: 1.5rem; |
| font-weight: 500; |
| text-align: left; |
| } |
| |
| form[role="dialog"] dl > dd { |
| padding-right: 1.5rem; |
| font-weight: 300; |
| text-overflow: ellipsis; |
| vertical-align: top; |
| overflow: hidden; |
| } |
| |
| /* input areas */ |
| input[type="text"], |
| input[type="password"], |
| input[type="email"], |
| input[type="tel"], |
| input[type="search"], |
| input[type="url"], |
| input[type="number"], |
| textarea { |
| -moz-box-sizing: border-box; |
| display: block; |
| overflow: hidden; |
| width: 100%; |
| height: 3rem; |
| resize: none; |
| padding: 0 1rem; |
| font-size: 1.6rem; |
| line-height: 3rem; |
| border: 0.1rem solid #ccc; |
| border-radius: 0.3rem; |
| box-shadow: none; /* override the box-shadow from the system (performance issue) */ |
| background: #fff url(input_areas/images/ui/shadow.png) repeat-x; |
| } |