comparison: Touchgui/plugins/org.apache.cordova.dialogs/www/firefoxos/notification.css
Touchgui/plugins/org.apache.cordova.dialogs/www/firefoxos/notification.css
- changeset 0
- e8ccd40d0ef6
equal
deleted
inserted
replaced
| -1:000000000000 | 0:bfd687dd7710 |
|---|---|
| 1 /* | |
| 2 * | |
| 3 * Licensed to the Apache Software Foundation (ASF) under one | |
| 4 * or more contributor license agreements. See the NOTICE file | |
| 5 * distributed with this work for additional information | |
| 6 * regarding copyright ownership. The ASF licenses this file | |
| 7 * to you under the Apache License, Version 2.0 (the | |
| 8 * "License"); you may not use this file except in compliance | |
| 9 * with the License. You may obtain a copy of the License at | |
| 10 * | |
| 11 * http://www.apache.org/licenses/LICENSE-2.0 | |
| 12 * | |
| 13 * Unless required by applicable law or agreed to in writing, | |
| 14 * software distributed under the License is distributed on an | |
| 15 * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY | |
| 16 * KIND, either express or implied. See the License for the | |
| 17 * specific language governing permissions and limitations | |
| 18 * under the License. | |
| 19 * | |
| 20 */ | |
| 21 | |
| 22 /* Main dialog setup */ | |
| 23 form[role="dialog"] { | |
| 24 background: | |
| 25 url(../img/pattern.png) repeat left top, | |
| 26 url(../img/gradient.png) no-repeat left top / 100% 100%; | |
| 27 overflow: hidden; | |
| 28 position: absolute; | |
| 29 z-index: 100; | |
| 30 top: 0; | |
| 31 left: 0; | |
| 32 right: 0; | |
| 33 bottom: 0; | |
| 34 padding: 1.5rem 0 7rem; | |
| 35 font-family: "MozTT", Sans-serif; | |
| 36 font-size: 0; | |
| 37 /* Using font-size: 0; we avoid the unwanted visual space (about 3px) | |
| 38 created by white-spaces and break lines in the code betewen inline-block elements */ | |
| 39 color: #fff; | |
| 40 text-align: left; | |
| 41 } | |
| 42 | |
| 43 form[role="dialog"]:before { | |
| 44 content: ""; | |
| 45 display: inline-block; | |
| 46 vertical-align: middle; | |
| 47 width: 0.1rem; | |
| 48 height: 100%; | |
| 49 margin-left: -0.1rem; | |
| 50 } | |
| 51 | |
| 52 form[role="dialog"] > section { | |
| 53 font-weight: lighter; | |
| 54 font-size: 1.8rem; | |
| 55 color: #FAFAFA; | |
| 56 padding: 0 1.5rem; | |
| 57 -moz-box-sizing: padding-box; | |
| 58 width: 100%; | |
| 59 display: inline-block; | |
| 60 overflow-y: scroll; | |
| 61 max-height: 100%; | |
| 62 vertical-align: middle; | |
| 63 white-space: normal; | |
| 64 } | |
| 65 | |
| 66 form[role="dialog"] h1 { | |
| 67 font-weight: normal; | |
| 68 font-size: 1.6rem; | |
| 69 line-height: 1.5em; | |
| 70 color: #fff; | |
| 71 margin: 0; | |
| 72 padding: 0 1.5rem 1rem; | |
| 73 border-bottom: 0.1rem solid #686868; | |
| 74 } | |
| 75 | |
| 76 /* Menu & buttons setup */ | |
| 77 form[role="dialog"] menu { | |
| 78 margin: 0; | |
| 79 padding: 1.5rem; | |
| 80 padding-bottom: 0.5rem; | |
| 81 border-top: solid 0.1rem rgba(255, 255, 255, 0.1); | |
| 82 background: #2d2d2d url(../img/pattern.png) repeat left top; | |
| 83 display: block; | |
| 84 overflow: hidden; | |
| 85 position: absolute; | |
| 86 left: 0; | |
| 87 right: 0; | |
| 88 bottom: 0; | |
| 89 text-align: center; | |
| 90 } | |
| 91 | |
| 92 form[role="dialog"] menu button::-moz-focus-inner { | |
| 93 border: none; | |
| 94 outline: none; | |
| 95 } | |
| 96 form[role="dialog"] menu button { | |
| 97 width: 100%; | |
| 98 height: 2.4rem; | |
| 99 margin: 0 0 1rem; | |
| 100 padding: 0 1.5rem; | |
| 101 -moz-box-sizing: border-box; | |
| 102 display: inline-block; | |
| 103 vertical-align: middle; | |
| 104 text-overflow: ellipsis; | |
| 105 white-space: nowrap; | |
| 106 overflow: hidden; | |
| 107 background: #fafafa url(../img/default.png) repeat-x left bottom/ auto 100%; | |
| 108 border: 0.1rem solid #a6a6a6; | |
| 109 border-radius: 0.3rem; | |
| 110 font: 500 1.2rem/2.4rem 'MozTT', Sans-serif; | |
| 111 color: #333; | |
| 112 text-align: center; | |
| 113 text-shadow: 0.1rem 0.1rem 0 rgba(255,255,255,0.3); | |
| 114 text-decoration: none; | |
| 115 outline: none; | |
| 116 } | |
| 117 | |
| 118 /* Press (default & recommend) */ | |
| 119 form[role="dialog"] menu button:active, | |
| 120 form[role="dialog"] menu button.recommend:active, | |
| 121 a.recommend[role="button"]:active { | |
| 122 border-color: #008aaa; | |
| 123 color: #333; | |
| 124 } | |
| 125 | |
| 126 /* Recommend */ | |
| 127 form[role="dialog"] menu button.recommend { | |
| 128 background-image: url(../img/recommend.png); | |
| 129 background-color: #00caf2; | |
| 130 border-color: #008eab; | |
| 131 } | |
| 132 | |
| 133 /* Danger */ | |
| 134 form[role="dialog"] menu button.danger, | |
| 135 a.danger[role="button"] { | |
| 136 background-image: url(../img/danger.png); | |
| 137 background-color: #b70404; | |
| 138 color: #fff; | |
| 139 text-shadow: none; | |
| 140 border-color: #820000; | |
| 141 } | |
| 142 | |
| 143 /* Danger Press */ | |
| 144 form[role="dialog"] menu button.danger:active { | |
| 145 background-image: url(../img/danger-press.png); | |
| 146 background-color: #890707; | |
| 147 } | |
| 148 | |
| 149 /* Disabled */ | |
| 150 form[role="dialog"] > menu > button[disabled] { | |
| 151 background: #5f5f5f; | |
| 152 color: #4d4d4d; | |
| 153 text-shadow: none; | |
| 154 border-color: #4d4d4d; | |
| 155 pointer-events: none; | |
| 156 } | |
| 157 | |
| 158 | |
| 159 form[role="dialog"] menu button:nth-child(even) { | |
| 160 margin-left: 1rem; | |
| 161 } | |
| 162 | |
| 163 form[role="dialog"] menu button, | |
| 164 form[role="dialog"] menu button:nth-child(odd) { | |
| 165 margin: 0 0 1rem 0; | |
| 166 } | |
| 167 | |
| 168 form[role="dialog"] menu button { | |
| 169 width: calc((100% - 1rem) / 2); | |
| 170 } | |
| 171 | |
| 172 form[role="dialog"] menu button.full { | |
| 173 width: 100%; | |
| 174 } | |
| 175 | |
| 176 /* Specific component code */ | |
| 177 form[role="dialog"] p { | |
| 178 word-wrap: break-word; | |
| 179 margin: 1rem 0 0; | |
| 180 padding: 0 1.5rem 1rem; | |
| 181 line-height: 3rem; | |
| 182 } | |
| 183 | |
| 184 form[role="dialog"] p img { | |
| 185 float: left; | |
| 186 margin-right: 2rem; | |
| 187 } | |
| 188 | |
| 189 form[role="dialog"] p strong { | |
| 190 font-weight: lighter; | |
| 191 } | |
| 192 | |
| 193 form[role="dialog"] p small { | |
| 194 font-size: 1.4rem; | |
| 195 font-weight: normal; | |
| 196 color: #cbcbcb; | |
| 197 display: block; | |
| 198 } | |
| 199 | |
| 200 form[role="dialog"] dl { | |
| 201 border-top: 0.1rem solid #686868; | |
| 202 margin: 1rem 0 0; | |
| 203 overflow: hidden; | |
| 204 padding-top: 1rem; | |
| 205 font-size: 1.6rem; | |
| 206 line-height: 2.2rem; | |
| 207 } | |
| 208 | |
| 209 form[role="dialog"] dl > dt { | |
| 210 clear: both; | |
| 211 float: left; | |
| 212 width: 7rem; | |
| 213 padding-left: 1.5rem; | |
| 214 font-weight: 500; | |
| 215 text-align: left; | |
| 216 } | |
| 217 | |
| 218 form[role="dialog"] dl > dd { | |
| 219 padding-right: 1.5rem; | |
| 220 font-weight: 300; | |
| 221 text-overflow: ellipsis; | |
| 222 vertical-align: top; | |
| 223 overflow: hidden; | |
| 224 } | |
| 225 | |
| 226 /* input areas */ | |
| 227 input[type="text"], | |
| 228 input[type="password"], | |
| 229 input[type="email"], | |
| 230 input[type="tel"], | |
| 231 input[type="search"], | |
| 232 input[type="url"], | |
| 233 input[type="number"], | |
| 234 textarea { | |
| 235 -moz-box-sizing: border-box; | |
| 236 display: block; | |
| 237 overflow: hidden; | |
| 238 width: 100%; | |
| 239 height: 3rem; | |
| 240 resize: none; | |
| 241 padding: 0 1rem; | |
| 242 font-size: 1.6rem; | |
| 243 line-height: 3rem; | |
| 244 border: 0.1rem solid #ccc; | |
| 245 border-radius: 0.3rem; | |
| 246 box-shadow: none; /* override the box-shadow from the system (performance issue) */ | |
| 247 background: #fff url(input_areas/images/ui/shadow.png) repeat-x; | |
| 248 } |
