/** * UI v1.0.0 * Copyright 2015-2017 Muyao * Licensed under the Muyao License 1.0 */ .toast-title { font-weight: 700; } .toast-message { -ms-word-wrap: break-word; word-wrap: break-word; } .toast-message a, .toast-message label { color: #fff; } .toast-message a:hover { color: #ccd5db; text-decoration: none; } .toast-close-button { position: relative; top: -.3em; right: -.3em; float: right; margin-bottom: -.5em; font-size: 20px; font-weight: 400; color: #fff; text-shadow: 0 1px 0 #fff; filter: alpha(opacity=80); opacity: .8; -webkit-text-shadow: 0 1px 0 #fff; } .toast-close-button:hover, .toast-close-button:focus { color: #000; text-decoration: none; cursor: pointer; filter: alpha(opacity=40); opacity: .4; } button.toast-close-button { -webkit-appearance: none; padding: 0; cursor: pointer; background: transparent; border: 0; } .toast-top-center { top: 12px; right: 0; width: 100%; } .toast-bottom-center { right: 0; bottom: 12px; width: 100%; } .toast-top-full-width { top: 0; right: 0; width: 100%; } .toast-top-full-width .toast { margin-bottom: 0; } .toast-bottom-full-width { right: 0; bottom: 0; width: 100%; } .toast-bottom-full-width .toast { margin-bottom: 0 !important; } .toast-top-left { top: 12px; left: 12px; } .toast-top-right { top: 12px; right: 12px; } .toast-bottom-right { right: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; left: 12px; } [class^="toast-"][aria-live="polite"] { position: fixed; z-index: 1991050199; pointer-events: none; /* 覆盖 */ } [class^="toast-"][aria-live="polite"] * { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } [class^="toast-"][aria-live="polite"] > div { position: relative; width: 300px; padding: 10px 15px; margin: 0 0 6px; overflow: hidden; color: #a3afb7; pointer-events: auto; filter: alpha(opacity=95); background-repeat: no-repeat; background-position: 15px center; border: 1px solid transparent; border-radius: 3px; opacity: .95; } [class^="toast-"][aria-live="polite"] > .toast-shadow { -webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, .23); box-shadow: 0 1px 3px rgba(0, 0, 0, .23); } [class^="toast-"][aria-live="polite"] > .toast-shadow:hover { -webkit-box-shadow: 0 1px 6px rgba(0, 0, 0, .23); box-shadow: 0 1px 6px rgba(0, 0, 0, .23); } [class^="toast-"][aria-live="polite"] > :hover { cursor: pointer; filter: alpha(opacity=100); opacity: 1; } [class^="toast-"][aria-live="polite"] > .toast-success:not(.toast-just-text), [class^="toast-"][aria-live="polite"] > .toast-info:not(.toast-just-text), [class^="toast-"][aria-live="polite"] > .toast-warning:not(.toast-just-text), [class^="toast-"][aria-live="polite"] > .toast-error:not(.toast-just-text) { padding-left: 50px; } [class^="toast-"][aria-live="polite"] > .toast-success:not(.toast-just-text):before, [class^="toast-"][aria-live="polite"] > .toast-info:not(.toast-just-text):before, [class^="toast-"][aria-live="polite"] > .toast-warning:not(.toast-just-text):before, [class^="toast-"][aria-live="polite"] > .toast-error:not(.toast-just-text):before { position: absolute; top: 50%; left: 12px; font-family: "Web Icons"; font-size: 30px; font-style: normal; font-weight: 400; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); -o-transform: translate(0, -50%); transform: translate(0, -50%); text-rendering: auto; speak: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } [class^="toast-"][aria-live="polite"] > .toast-success { color: #fff; } [class^="toast-"][aria-live="polite"] > .toast-success:not(.toast-just-text):before { content: "\f192"; } [class^="toast-"][aria-live="polite"] > .toast-info { color: #fff; } [class^="toast-"][aria-live="polite"] > .toast-info:not(.toast-just-text):before { content: "\f19e"; } [class^="toast-"][aria-live="polite"] > .toast-warning { color: #fff; } [class^="toast-"][aria-live="polite"] > .toast-warning:not(.toast-just-text):before { content: "\f1a0"; } [class^="toast-"][aria-live="polite"] > .toast-error { color: #fff; } [class^="toast-"][aria-live="polite"] > .toast-error:not(.toast-just-text):before { content: "\f19a"; } [class^="toast-"][aria-live="polite"].toast-top-center > div, [class^="toast-"][aria-live="polite"].toast-bottom-center > div { width: 300px; margin-right: auto; margin-left: auto; } [class^="toast-"][aria-live="polite"].toast-top-full-width > div, [class^="toast-"][aria-live="polite"].toast-bottom-full-width > div { width: 100%; margin-right: auto; margin-left: auto; border-radius: 0; } .toast { background-color: #e4eaee; } .toast-success { background-color: #5cd29d; } .toast-error { background-color: #fa7a7a; } .toast-info { background-color: #77d6e1; } .toast-warning { background-color: #f4b066; } .toast-progress { position: absolute; bottom: 0; left: 0; height: 4px; background-color: #000; filter: alpha(opacity=10); opacity: .1; } /* 响应式设计 */ @media all and (max-width: 240px) { [class^="toast-"][aria-live="polite"] > div { width: 11em; padding: 8px 8px 8px 50px; } [class^="toast-"][aria-live="polite"] .toast-close-button { top: -.2em; right: -.2em; } } @media all and (min-width: 241px) and (max-width: 480px) { [class^="toast-"][aria-live="polite"] > div { width: 18em; padding: 8px 8px 8px 50px; } [class^="toast-"][aria-live="polite"] .toast-close-button { top: -.2em; right: -.2em; } } @media all and (min-width: 481px) and (max-width: 768px) { [class^="toast-"][aria-live="polite"] > div { width: 25em; padding: 15px 15px 15px 50px; } }