github.com/fanux/shipyard@v0.0.0-20161009071005-6515ce223235/controller/static/semantic/dist/components/message.css (about) 1 /*! 2 * # Semantic UI x.x - Message 3 * http://github.com/semantic-org/semantic-ui/ 4 * 5 * 6 * Copyright 2014 Contributors 7 * Released under the MIT license 8 * http://opensource.org/licenses/MIT 9 * 10 */ 11 12 13 /******************************* 14 Message 15 *******************************/ 16 17 .ui.message { 18 position: relative; 19 min-height: 1em; 20 margin: 1em 0em; 21 background: #efefef; 22 padding: 1em 1.5em; 23 line-height: 1.3; 24 color: rgba(0, 0, 0, 0.8); 25 -webkit-transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; 26 transition: opacity 0.2s ease, color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; 27 border-radius: 0.2857rem; 28 box-shadow: 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset, 0px 0px 0px 0px transparent; 29 } 30 .ui.message:first-child { 31 margin-top: 0em; 32 } 33 .ui.message:last-child { 34 margin-bottom: 0em; 35 } 36 37 /*-------------- 38 Content 39 ---------------*/ 40 41 42 /* Header */ 43 .ui.message .header { 44 display: block; 45 font-family: 'Roboto', 'Helvetica Neue', Arial, Helvetica, sans-serif; 46 font-weight: bold; 47 margin: 0em 0em 0.5rem 0em; 48 } 49 50 /* Default font size */ 51 .ui.message .header:not(.ui) { 52 font-size: 1.1em; 53 } 54 55 /* Paragraph */ 56 .ui.message p { 57 opacity: 0.85; 58 margin: 0.75em 0em; 59 } 60 .ui.message p:first-child { 61 margin-top: 0em; 62 } 63 .ui.message p:last-child { 64 margin-bottom: 0em; 65 } 66 .ui.message .header + p { 67 margin-top: 0.25em; 68 } 69 70 /* List */ 71 .ui.message ul.list { 72 opacity: 0.85; 73 list-style-position: inside; 74 margin: 0.5em 0em 0em; 75 padding: 0em; 76 } 77 .ui.message ul.list:first-child { 78 margin-top: 0em; 79 } 80 .ui.message ul.list:last-child { 81 margin-bottom: 0em; 82 } 83 .ui.message ul.list li { 84 position: relative; 85 list-style-type: none; 86 margin: 0em 0em 0.3em 1em; 87 padding: 0em; 88 } 89 .ui.message ul.list li:before { 90 position: absolute; 91 content: '•'; 92 left: -1em; 93 height: 100%; 94 vertical-align: baseline; 95 } 96 .ui.message ul.list li:last-child { 97 margin-bottom: 0em; 98 } 99 100 /* Icon */ 101 .ui.message > .icon { 102 margin-right: 0.6em; 103 } 104 105 /* Close Icon */ 106 .ui.message > .close.icon { 107 cursor: pointer; 108 position: absolute; 109 margin: 0em; 110 top: 1.15em; 111 right: 0.5em; 112 opacity: 0.7; 113 -webkit-transition: opacity 0.1s linear 114 ; 115 transition: opacity 0.1s linear 116 ; 117 } 118 .ui.message > .close.icon:hover { 119 opacity: 1; 120 } 121 122 /* First / Last Element */ 123 .ui.message > :first-child { 124 margin-top: 0em; 125 } 126 .ui.message > :last-child { 127 margin-bottom: 0em; 128 } 129 130 131 /******************************* 132 States 133 *******************************/ 134 135 136 /*-------------- 137 Visible 138 ---------------*/ 139 140 .ui.visible.visible.visible.visible.message { 141 display: block; 142 } 143 .ui.icon.visible.visible.visible.visible.message { 144 display: table; 145 } 146 147 /*-------------- 148 Hidden 149 ---------------*/ 150 151 .ui.hidden.hidden.hidden.hidden.message { 152 display: none; 153 } 154 155 156 /******************************* 157 Variations 158 *******************************/ 159 160 161 /*-------------- 162 Compact 163 ---------------*/ 164 165 .ui.compact.message { 166 display: inline-block; 167 } 168 169 /*-------------- 170 Attached 171 ---------------*/ 172 173 .ui.attached.message { 174 margin-bottom: -1px; 175 border-radius: 0.2857rem 0.2857rem 0em 0em; 176 box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset; 177 margin-left: -1px; 178 margin-right: -1px; 179 } 180 .ui.attached + .ui.attached.message:not(.top):not(.bottom) { 181 margin-top: -1px; 182 border-radius: 0em; 183 } 184 .ui.bottom.attached.message { 185 margin-top: -1px; 186 border-radius: 0em 0em 0.2857rem 0.2857rem; 187 box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.1) inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 188 } 189 .ui.bottom.attached.message:not(:last-child) { 190 margin-bottom: 1em; 191 } 192 .ui.attached.icon.message { 193 display: block; 194 width: auto; 195 } 196 197 /*-------------- 198 Icon 199 ---------------*/ 200 201 .ui.icon.message { 202 display: table; 203 width: 100%; 204 } 205 .ui.icon.message > .icon:not(.close) { 206 display: table-cell; 207 width: auto; 208 vertical-align: middle; 209 font-size: 3em; 210 opacity: 0.8; 211 } 212 .ui.icon.message > .content { 213 display: table-cell; 214 width: 100%; 215 vertical-align: middle; 216 } 217 .ui.icon.message .icon:not(.close) + .content { 218 padding-left: 1.5rem; 219 } 220 .ui.icon.message .circular.icon { 221 width: 1em; 222 } 223 .ui.icon.message .circular.icon + .content { 224 width: auto; 225 padding-left: 2em; 226 } 227 228 /*-------------- 229 Floating 230 ---------------*/ 231 232 .ui.floating.message { 233 box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.15), 0px 0px 0px 1px rgba(39, 41, 43, 0.15) inset; 234 } 235 236 /*-------------- 237 Colors 238 ---------------*/ 239 240 .ui.black.message { 241 background-color: #1b1c1d; 242 color: #ffffff; 243 } 244 245 /*-------------- 246 Types 247 ---------------*/ 248 249 250 /* Positive */ 251 .ui.positive.message { 252 background-color: #eeffe7; 253 color: #3c763d; 254 } 255 .ui.positive.message, 256 .ui.attached.positive.message { 257 box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 258 } 259 .ui.positive.message .header { 260 color: #356e36; 261 } 262 263 /* Negative */ 264 .ui.negative.message { 265 background-color: #fff0f0; 266 color: #a94442; 267 } 268 .ui.negative.message, 269 .ui.attached.negative.message { 270 box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 271 } 272 .ui.negative.message .header { 273 color: #912d2b; 274 } 275 276 /* Info */ 277 .ui.info.message { 278 background-color: #e9faff; 279 color: #337b92; 280 } 281 .ui.info.message, 282 .ui.attached.info.message { 283 box-shadow: 0px 0px 0px 1px #aad6df inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 284 } 285 .ui.info.message .header { 286 color: #297187; 287 } 288 289 /* Warning */ 290 .ui.warning.message { 291 background-color: #fffbe6; 292 color: #876a38; 293 } 294 .ui.warning.message, 295 .ui.attached.warning.message { 296 box-shadow: 0px 0px 0px 1px #d9caab inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 297 } 298 .ui.warning.message .header { 299 color: #825c01; 300 } 301 302 /* Error */ 303 .ui.error.message { 304 background-color: #fff0f0; 305 color: #a94442; 306 } 307 .ui.error.message, 308 .ui.attached.error.message { 309 box-shadow: 0px 0px 0px 1px #dbb1b1 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 310 } 311 .ui.error.message .header { 312 color: #912d2b; 313 } 314 315 /* Success */ 316 .ui.success.message { 317 background-color: #eeffe7; 318 color: #3c763d; 319 } 320 .ui.success.message, 321 .ui.attached.success.message { 322 box-shadow: 0px 0px 0px 1px #b7caa7 inset, 0px 1px 2px 0 rgba(0, 0, 0, 0.05); 323 } 324 .ui.success.message .header { 325 color: #356e36; 326 } 327 328 /* Colors */ 329 .ui.inverted.message, 330 .ui.black.message { 331 background-color: #1b1c1d; 332 color: #ffffff; 333 } 334 .ui.blue.message { 335 background-color: #dff0ff; 336 color: #006e93; 337 } 338 .ui.blue.message .header { 339 color: #005b7a; 340 } 341 .ui.green.message { 342 background-color: #ebffed; 343 color: #1ebc30; 344 } 345 .ui.green.message .header { 346 color: #1aa62a; 347 } 348 .ui.orange.message { 349 background-color: #ffedde; 350 color: #e07b53; 351 } 352 .ui.orange.message .header { 353 color: #dc6a3d; 354 } 355 .ui.pink.message { 356 background-color: #ffe3fb; 357 color: #d9499a; 358 } 359 .ui.pink.message .header { 360 color: #d5348e; 361 } 362 .ui.purple.message { 363 background-color: #eae7ff; 364 color: #564f8a; 365 } 366 .ui.purple.message .header { 367 color: #4c467a; 368 } 369 .ui.red.message { 370 background-color: #ffe8e6; 371 color: #d95c5c; 372 } 373 .ui.red.message .header { 374 color: #d44747; 375 } 376 .ui.teal.message { 377 background-color: #e9ffff; 378 color: #10a3a3; 379 } 380 .ui.teal.message .header { 381 color: #0e8c8c; 382 } 383 .ui.yellow.message { 384 background-color: #fff8db; 385 color: #b58105; 386 } 387 .ui.yellow.message .header { 388 color: #9c6f04; 389 } 390 391 /*-------------- 392 Sizes 393 ---------------*/ 394 395 .ui.small.message { 396 font-size: 0.92857143em; 397 } 398 .ui.message { 399 font-size: 1em; 400 } 401 .ui.large.message { 402 font-size: 1.14285714em; 403 } 404 .ui.huge.message { 405 font-size: 1.42857143em; 406 } 407 .ui.massive.message { 408 font-size: 1.71428571em; 409 } 410 411 412 /******************************* 413 Theme Overrides 414 *******************************/ 415 416 417 418 /******************************* 419 User Variable Overrides 420 *******************************/ 421