1/** 2 * This file provides the design styles for forms. 3 */ 4 5/* for all of the form styles, style.ini colours are not used on purpose (except for fieldset border) */ 6form { 7 display: inline; 8 margin: 0; 9 padding: 0; 10 11 // multiline label 12 fieldset > label.block > span:first-child { 13 display: inline-block; 14 15 @media @screen_min-lg { 16 width: 48.8%; 17 } 18 19 @media @screen_max-lg { 20 width: 48.5%; 21 } 22 } 23} 24 25fieldset { 26 font-size: @font-size-default; 27 line-height: 140%; 28 border: 1px solid @ini_text_alt; 29 padding: .7rem 1rem; 30 31 > :last-child { 32 margin-bottom: 0; 33 } 34 35 + p { 36 padding-top: 1rem; 37 } 38} 39 40legend { 41 margin: 0; 42 padding: 0 .1em; 43} 44 45label { 46 vertical-align: baseline; 47 cursor: pointer; 48} 49 50input, 51textarea, 52button, 53select, 54optgroup, 55option, 56keygen, 57output, 58meter, 59progress { 60 font: inherit; 61 font-weight: normal; 62 color: #333; 63 background-color: #fff; 64 line-height: normal; 65 margin: 0; 66 vertical-align: middle; 67 box-sizing: border-box; 68} 69 70select { 71 max-width: 100%; 72} 73 74textarea.edit { 75 font-size: @font-size-default; 76} 77 78optgroup { 79 font-style: italic; 80 font-weight: bold; 81} 82 83option { 84 font-style: normal; 85 font-weight: normal; 86} 87 88input, 89textarea, 90select, 91keygen { 92 min-height: @formfield_min-height; 93 border: 1px solid @ini_border; 94 box-shadow: inset 0 0 1px #eee; 95 border-radius: @fix_border-radius; 96 padding-left: .3rem; 97 padding-right: .3rem; 98} 99 100input[type="radio"], 101input[type="checkbox"] { 102 min-height: 1rem; 103} 104 105input[type="radio"], 106input[type="checkbox"], 107input[type="image"] { 108 padding: 0; 109 border-style: none; 110 //box-shadow: none; :in ie picture and checkbox disappear 111} 112 113input:active, 114input:focus, 115textarea:active, 116textarea:focus, 117select:active, 118select:focus, 119keygen:active, 120keygen:focus { 121 border-color: #999; 122} 123 124input[type="file"] { 125 padding-top: .1rem; 126 padding-bottom: .1rem; 127} 128 129/* + + + + + buttons + + + + + */ 130button { 131 background-color: #eee; 132 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); 133 background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); 134 border: 1px solid #ccc; 135 border-radius: @fix_border-radius; 136 color: #333; 137 padding: .1em .5em; 138 cursor: pointer; 139 transition: @transition background-color, @transition color; 140 141 &:hover, 142 &:focus, 143 &:active { 144 background-color: #ddd; 145 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); 146 background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 147 border-color: #999; 148 } 149} 150 151/* + + + all types of submit-buttons + + + */ 152form input[type=submit], // heredity 'adnewpage' 153a.button, 154input[type=submit], 155input[type=reset], 156button[type=submit], 157.qq-upload-button { 158 cursor: pointer; 159 box-shadow: none; 160 background-image: none; 161 background-color: @ini_button_background; 162 border: 1px solid @ini_button_background; 163 border-radius: @fix_border-radius; 164 color: @ini_button_color; 165 vertical-align: top; 166 padding: .3em @grid; 167 transition: @transition background-color, @transition color; 168 169 &:hover, 170 &:active, 171 &:focus { 172 background-color: @ini_button_color; 173 color: @ini_button_background; 174 } 175} 176 177button[type='reset'] { 178 min-height: @formfield_min-height; 179 vertical-align: middle; 180 padding: .3em 1rem; 181} 182 183input[type=submit], 184button[type=submit] { 185 min-height: @formfield_min-height; 186 vertical-align: middle; 187 188 &[disabled] { 189 cursor: default; 190 191 &:hover, 192 &:active, 193 &:focus { 194 box-shadow: none; 195 background-image: none; 196 background-color: @ini_button_background; 197 color: @ini_button_color; 198 border-color: @ini_button_background; 199 } 200 } 201 202 + span { 203 display: block; 204 margin-top: @grid; 205 } 206} 207 208/* + + + all types of buttons not being submit-buttons + + + */ 209input.button, 210input[type=button] { 211 cursor: pointer; 212 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); 213 background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); 214 background-color: #eee; 215 border: 1px solid #ccc; 216 border-radius: @fix_border-radius; 217 color: #333; 218 padding: .1em .5em; 219 transition: @transition background-color, @transition color; 220 221 &:hover, 222 &:active, 223 &:focus { 224 background-color: #ddd; 225 border-color: #999; 226 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); 227 background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 228 } 229} 230 231/* + + + all disabled buttons + + + */ 232input[disabled], 233button[disabled], 234select[disabled], 235textarea[disabled], 236option[disabled], 237input[readonly], 238button[readonly], 239select[readonly], 240textarea[readonly] { 241 cursor: auto; 242 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc4MjQiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0VFRUVFRSIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0NDQ0NDQyIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnODI0KSIgLz4KPC9zdmc+); 243 background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #eeeeee 99%, #cccccc 99%); 244 background-color: #eee; 245 opacity: .5; 246 border: 1px solid @ini_border; 247 border-radius: @fix_border-radius; 248 color: #333; 249 font-weight: normal; 250 padding: .3em @grid; 251 transition: @transition background-color, @transition color; 252 253 &:hover, 254 &:active, 255 &:focus { 256 background-color: #ddd; 257 background-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPgo8bGluZWFyR3JhZGllbnQgaWQ9Imc2NzAiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+CjxzdG9wIHN0b3AtY29sb3I9IiNGRkZGRkYiIG9mZnNldD0iMCIvPjxzdG9wIHN0b3AtY29sb3I9IiNGNEY0RjQiIG9mZnNldD0iMC4zIi8+PHN0b3Agc3RvcC1jb2xvcj0iI0RERERERCIgb2Zmc2V0PSIwLjk5Ii8+PHN0b3Agc3RvcC1jb2xvcj0iI0JCQkJCQiIgb2Zmc2V0PSIuOTkiLz4KPC9saW5lYXJHcmFkaWVudD4KPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNnNjcwKSIgLz4KPC9zdmc+); 258 background-image: linear-gradient(to bottom, #ffffff 0%, #f4f4f4 30%, #dddddd 99%, #bbbbbb 99%); 259 border-color: #999; 260 color: #333; 261 } 262} 263 264input::-moz-focus-inner, 265button::-moz-focus-inner { 266 border: 0; 267 padding: 0; 268} 269 270/* + + + + + + + + + + + + + + + + + + + + + + + + + + */ 271/* media queries - Styles for auth forms */ 272@media @screen_max-xs { 273 .tpl_sprintdoc { 274 #dw__login, 275 #dw__register, 276 #dw__resendpwd { 277 fieldset { 278 width: 100%; 279 280 label.block { 281 text-align: left; 282 283 > span:first-child { 284 width: 100%; 285 } 286 287 input.edit { 288 width: 100%; 289 margin-top: .5rem; 290 } 291 } 292 } 293 } 294 295 #dw__login { 296 label[for="remember__me"] { 297 width: 100%; 298 margin-left: 0; 299 } 300 } 301 } 302} 303