初始化

Face.Web/Theme/css/plugins/toastr/iconfont/iconfont.svg

@@ -0,0 +1,38 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!--
+2013-9-30: Created.
+-->
+<svg>
+<metadata>
+Created by iconfont
+</metadata>
+<defs>
+
+<font id="iconfont" horiz-adv-x="1024" >
+  <font-face
+    font-family="iconfont"
+    font-weight="500"
+    font-stretch="normal"
+    units-per-em="1024"
+    ascent="896"
+    descent="-128"
+  />
+    <missing-glyph />
+    
+    <glyph glyph-name="success" unicode="&#59039;" d="M510.410805 833.15672c-247.193939 0-447.579805-200.392006-447.579805-447.581852 0-247.192915 200.385866-447.578782 447.579805-447.578782 247.192915 0 447.578782 200.385866 447.578782 447.578782C957.99061 632.764714 757.603721 833.15672 510.410805 833.15672zM510.410805-12.271232000000055c-219.72533 0-397.848147 178.12077-397.848147 397.847124 0 219.72226 178.119747 397.84917 397.848147 397.84917 219.726354 0 397.847124-178.12691 397.847124-397.84917C908.257929 165.84953800000005 730.138182-12.271232000000055 510.410805-12.271232000000055zM459.437877 329.432197l-93.789083 100.627838-54.160527-47.593971 147.948587-195.816804 274.763854 304.603463-42.269709 43.515073L459.437877 329.432197z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="error" unicode="&#58999;" d="M510 834C262.58 834 62 633.4200000000001 62 386s200.58-448 448-448 448 200.58 448 448S757.42 834 510 834z m272.94-720.94a384.6 384.6 0 1 0 82.75 122.71 384.78 384.78 0 0 0-82.75-122.71zM695.92 571.9200000000001a31 31 0 0 1-43.84 0L509.5 429.34 366.92 571.9200000000001a31 31 0 0 1-43.84-43.84L465.66 385.5 323.08 242.91999999999996a31 31 0 1 1 43.84-43.84L509.5 341.65999999999997l142.58-142.58a31 31 0 0 1 43.84 43.84L553.34 385.5l142.58 142.58a31 31 0 0 1 0 43.84z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="info" unicode="&#58969;" d="M512 839.33333333C263.09375 839.33333333 62 638.23958333 62 389.33333333s201.09375-450 450-450 450 201.09375 450 450S760.90625 839.33333333 512 839.33333333z m0-843.75C294.03125-4.4166666700000405 118.25 171.36458332999996 118.25 389.33333333S294.03125 783.08333333 512 783.08333333s393.75-175.78125 393.75-393.75-175.78125-393.75-393.75-393.75z m29.53125 232.03125c-9.84375-11.25-18.28125-16.875-23.90625-16.875-2.8125 0-4.21875 0-7.03125 1.40625s-2.8125 4.21875-2.8125 8.4375 1.40625 15.46875 5.625 30.9375c1.40625 5.625 4.21875 16.875 8.4375 32.34375l50.625 184.21875-28.125-5.625c-9.84375-1.40625-26.71875-4.21875-49.21875-7.03125-23.90625-2.8125-40.78125-4.21875-53.4375-5.625v-16.875c14.0625 0 23.90625-1.40625 29.53125-4.21875s8.4375-7.03125 8.4375-15.46875v-4.21875c0-1.40625 0-2.8125-1.40625-5.625l-39.375-146.25c-2.8125-11.25-5.625-19.6875-7.03125-25.3125-2.8125-11.25-4.21875-19.6875-4.21875-25.3125 0-15.46875 4.21875-26.71875 14.0625-33.75s19.6875-11.25 32.34375-11.25c21.09375 0 40.78125 8.4375 59.0625 26.71875 11.25 11.25 26.71875 32.34375 47.8125 63.28125l-14.0625 9.84375c-7.03125-11.25-16.875-22.5-25.3125-33.75z m11.25 386.71875c-12.65625 0-22.5-4.21875-30.9375-12.65625s-12.65625-18.28125-12.65625-30.9375c0-12.65625 4.21875-22.5 12.65625-30.9375s18.28125-12.65625 30.9375-12.65625c12.65625 0 22.5 4.21875 30.9375 12.65625s12.65625 18.28125 12.65625 30.9375c0 12.65625-4.21875 22.5-12.65625 30.9375s-18.28125 12.65625-30.9375 12.65625z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="warning" unicode="&#58919;" d="M512 786.39215696A397.05882363 397.05882363 0 1 0 114.94117637 389.33333333 397.05882363 397.05882363 0 0 0 512 786.39215696m0 52.94117637a450 450 0 1 1 450-450A450 450 0 0 1 512 839.33333333zM512 226.80392151a51.08823545 51.08823545 0 1 1 51.08823545-51.08823545A52.94117637 52.94117637 0 0 1 512 226.80392151zM512 654.03921604a52.94117637 52.94117637 0 0 1-52.94117637-52.94117724l20.11764726-274.5c0-29.38235273 3.70588271-52.94117637 33.08823458-52.94117636s33.08823545 23.82352911 33.08823545 52.94117636L564.94117637 601.0980388a52.94117637 52.94117637 0 0 1-52.94117637 52.94117724z m0 0"  horiz-adv-x="1024" />
+
+    
+
+
+  </font>
+</defs></svg>

Face.Web/Theme/css/plugins/toastr/toastr.css

@@ -0,0 +1,612 @@
+/*!
+ * Toastr v1.0
+ * Copyright 2018 The Wisp X Authors
+ * Link https://gitee.com/wispx
+ * Licensed under the MIT license
+ */
+.toastr-container,
+.toastr-container *,
+.toastr-container *:before,
+.toastr-container *:after {
+  box-sizing: border-box;
+}
+.toastr-container {
+  position: fixed;
+  z-index: 1121;
+  word-break: break-all;
+  word-wrap: break-word;
+}
+.toastr-container .center {
+  left: 50%;
+  transform: translateX(-50%);
+}
+.toastr-container.top-left {
+  top: 15px;
+  left: 15px;
+}
+.toastr-container.top-center {
+  top: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.toastr-container.top-right {
+  top: 15px;
+  right: 15px;
+}
+.toastr-container.right-bottom {
+  right: 15px;
+  bottom: 15px;
+}
+.toastr-container.bottom-center {
+  bottom: 15px;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.toastr-container.left-bottom {
+  left: 15px;
+  bottom: 15px;
+}
+.toastr-container ul {
+  list-style: none;
+  text-align: left;
+  padding: 0;
+  margin: 0;
+}
+.toastr-container ul li {
+  position: relative;
+  color: white;
+  cursor: pointer;
+  border-radius: 4px;
+  width: 200px;
+  margin: 0 0 6px;
+  padding: 10px 10px 10px 39px;
+  text-align: left;
+  font-size: 14px;
+  transition: all .3s;
+  box-shadow: 0 0 10px #c3c3c3;
+}
+.toastr-container ul li:hover {
+  box-shadow: 0 0 10px #7e7e7e;
+}
+.toastr-container ul li:before {
+  position: absolute;
+  font-family: "iconfont";
+  top: 50%;
+  transform: translateY(-50%);
+  color: white;
+  left: 8px;
+  font-size: 25px;
+}
+.toastr-container ul li.lg {
+  font-size: 17px;
+  padding: 15px 15px 15px 44px;
+}
+.toastr-container ul li.lg:before {
+  font-size: 30px;
+}
+.toastr-container ul li.sm {
+  font-size: 13px;
+  padding: 8px 8px 8px 34px;
+}
+.toastr-container ul li.sm:before {
+  font-size: 20px;
+}
+.toastr-container ul li.xs {
+  font-size: 12px;
+  padding: 5px 5px 5px 27px;
+}
+.toastr-container ul li.xs:before {
+  font-size: 14px;
+}
+.toastr-container ul li.toastr-success {
+  background-color: #73b575;
+}
+.toastr-container ul li.toastr-success:before {
+  content: "\e69f";
+}
+.toastr-container ul li.toastr-info {
+  background-color: #2f96b4;
+}
+.toastr-container ul li.toastr-info:before {
+  content: "\e659";
+}
+.toastr-container ul li.toastr-warning {
+  background-color: #f89406;
+}
+.toastr-container ul li.toastr-warning:before {
+  content: "\e627";
+}
+.toastr-container ul li.toastr-error {
+  background-color: #bd362f;
+}
+.toastr-container ul li.toastr-error:before {
+  content: "\e677";
+}
+@font-face {
+  font-family: "iconfont";
+  src: url('iconfont/iconfont.eot?t=1534834882874');
+  /* IE9*/
+  src: url('iconfont/iconfont.eot?t=1534834882874#iefix') format('embedded-opentype'), /* IE6-IE8 */ url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'), url('iconfont/iconfont.ttf?t=1534834882874') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/ url('iconfont/iconfont.svg?t=1534834882874#iconfont') format('svg');
+  /* iOS 4.1- */
+}
+/*@font-face {
+  font-family: 'iconfont';  !* project id 799822 *!
+  src: url('//at.alicdn.com/t/font_799822_gx7p1c2p.eot');
+  src: url('//at.alicdn.com/t/font_799822_gx7p1c2p.eot?#iefix') format('embedded-opentype'),
+  url('//at.alicdn.com/t/font_799822_gx7p1c2p.woff') format('woff'),
+  url('//at.alicdn.com/t/font_799822_gx7p1c2p.ttf') format('truetype'),
+  url('//at.alicdn.com/t/font_799822_gx7p1c2p.svg#iconfont') format('svg');
+}*/
+/* fade */
+.fade-in,
+.fade-in-top,
+.fade-in-right,
+.fade-in-bottom,
+.fade-in-left {
+  -webkit-animation: 0.3s ease-out backwards;
+  -moz-animation: 0.3s ease-out backwards;
+  -ms-animation: 0.3s ease-out backwards;
+  animation: 0.3s ease-out backwards;
+}
+.fade-out,
+.fade-out-top,
+.fade-out-right,
+.fade-out-bottom,
+.fade-out-left {
+  -webkit-animation: 0.3s ease-in forwards;
+  -moz-animation: 0.3s ease-in forwards;
+  -ms-animation: 0.3s ease-in forwards;
+  animation: 0.3s ease-in forwards;
+}
+/* 淡入 */
+.fade-in {
+  -webkit-animation-name: fade-in;
+  -moz-animation-name: fade-in;
+  -ms-animation-name: fade-in;
+  animation-name: fade-in;
+}
+/* 淡入-从上 */
+.fade-in-top {
+  -webkit-animation-name: fade-in-top;
+  -moz-animation-name: fade-in-top;
+  -ms-animation-name: fade-in-top;
+  animation-name: fade-in-top;
+}
+/* 淡入-从右 */
+.fade-in-right {
+  -webkit-animation-name: fade-in-right;
+  -moz-animation-name: fade-in-right;
+  -ms-animation-name: fade-in-right;
+  animation-name: fade-in-right;
+}
+/* 淡入-从下 */
+.fade-in-bottom {
+  -webkit-animation-name: fade-in-bottom;
+  -moz-animation-name: fade-in-bottom;
+  -ms-animation-name: fade-in-bottom;
+  animation-name: fade-in-bottom;
+}
+/* 淡入-从左 */
+.fade-in-left {
+  -webkit-animation-name: fade-in-left;
+  -moz-animation-name: fade-in-left;
+  -ms-animation-name: fade-in-left;
+  animation-name: fade-in-left;
+}
+/* 淡出 */
+.fade-out {
+  -webkit-animation-name: fade-out;
+  -moz-animation-name: fade-out;
+  -ms-animation-name: fade-out;
+  animation-name: fade-out;
+}
+/* 淡出-向上 */
+.fade-out-top {
+  -webkit-animation-name: fade-out-top;
+  -moz-animation-name: fade-out-top;
+  -ms-animation-name: fade-out-top;
+  animation-name: fade-out-top;
+}
+/* 淡出-向右 */
+.fade-out-right {
+  -webkit-animation-name: fade-out-right;
+  -moz-animation-name: fade-out-right;
+  -ms-animation-name: fade-out-right;
+  animation-name: fade-out-right;
+}
+/* 淡出-向下 */
+.fade-out-bottom {
+  -webkit-animation-name: fade-out-bottom;
+  -moz-animation-name: fade-out-bottom;
+  -ms-animation-name: fade-out-bottom;
+  animation-name: fade-out-bottom;
+}
+/* 淡出-向左 */
+.fade-out-left {
+  -webkit-animation-name: fade-out-left;
+  -moz-animation-name: fade-out-left;
+  -ms-animation-name: fade-out-left;
+  animation-name: fade-out-left;
+}
+/* 淡入 */
+@-webkit-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+}
+@-ms-keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+}
+@keyframes fade-in {
+  0% {
+    opacity: 0;
+  }
+}
+/* 淡入-从上 */
+@-webkit-keyframes fade-in-top {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(-100px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes fade-in-top {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(-100px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+@-ms-keyframes fade-in-top {
+  0% {
+    opacity: 0;
+    -ms-transform: translateY(-100px);
+  }
+  100% {
+    opacity: 1;
+    -ms-transform: translateY(0);
+  }
+}
+@keyframes fade-in-top {
+  0% {
+    opacity: 0;
+    transform: translateY(-100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* 淡入-从右 */
+@-webkit-keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(100px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+  }
+}
+@-moz-keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    -moz-transform: translateX(100px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateX(0);
+  }
+}
+@-ms-keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    -ms-transform: translateX(100px);
+  }
+  100% {
+    opacity: 1;
+    -ms-transform: translateX(0);
+  }
+}
+@keyframes fade-in-right {
+  0% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+/* 淡入-从下 */
+@-webkit-keyframes fade-in-bottom {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateY(100px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+}
+@-moz-keyframes fade-in-bottom {
+  0% {
+    opacity: 0;
+    -moz-transform: translateY(100px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+}
+@-ms-keyframes fade-in-bottom {
+  0% {
+    opacity: 0;
+    -ms-transform: translateY(100px);
+  }
+  100% {
+    opacity: 1;
+    -ms-transform: translateY(0);
+  }
+}
+@keyframes fade-in-bottom {
+  0% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+/* 淡入-从左 */
+@-webkit-keyframes fade-in-left {
+  0% {
+    opacity: 0;
+    -webkit-transform: translateX(-100px);
+  }
+  100% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+  }
+}
+@-moz-keyframes fade-in-left {
+  0% {
+    opacity: 0;
+    -moz-transform: translateX(-100px);
+  }
+  100% {
+    opacity: 1;
+    -moz-transform: translateX(0);
+  }
+}
+@-ms-keyframes fade-in-left {
+  0% {
+    opacity: 0;
+    -ms-transform: translateX(-100px);
+  }
+  100% {
+    opacity: 1;
+    -ms-transform: translateX(0);
+  }
+}
+@keyframes fade-in-left {
+  0% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+  100% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+}
+/* 淡出 */
+@-webkit-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-moz-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@-ms-keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+@keyframes fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+/* 淡出-向上 */
+@-webkit-keyframes fade-out-top {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(-100px);
+  }
+}
+@-moz-keyframes fade-out-top {
+  0% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform: translateY(-100px);
+  }
+}
+@-ms-keyframes fade-out-top {
+  0% {
+    opacity: 1;
+    -ms-transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -ms-transform: translateY(-100px);
+  }
+}
+@keyframes fade-out-top {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(-100px);
+  }
+}
+/* 淡出-向右 */
+@-webkit-keyframes fade-out-right {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(100px);
+  }
+}
+@-moz-keyframes fade-out-right {
+  0% {
+    opacity: 1;
+    -moz-transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform: translateX(100px);
+  }
+}
+@-ms-keyframes fade-out-right {
+  0% {
+    opacity: 1;
+    -ms-transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    -ms-transform: translateX(100px);
+  }
+}
+@keyframes fade-out-right {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(100px);
+  }
+}
+/* 淡出-向下 */
+@-webkit-keyframes fade-out-bottom {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateY(100px);
+  }
+}
+@-moz-keyframes fade-out-bottom {
+  0% {
+    opacity: 1;
+    -moz-transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform: translateY(100px);
+  }
+}
+@-ms-keyframes fade-out-bottom {
+  0% {
+    opacity: 1;
+    -ms-transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    -ms-transform: translateY(100px);
+  }
+}
+@keyframes fade-out-bottom {
+  0% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateY(100px);
+  }
+}
+/* 淡出-向左 */
+@-webkit-keyframes fade-out-left {
+  0% {
+    opacity: 1;
+    -webkit-transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translateX(-100px);
+  }
+}
+@-moz-keyframes fade-out-left {
+  0% {
+    opacity: 1;
+    -moz-transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    -moz-transform: translateX(-100px);
+  }
+}
+@-ms-keyframes fade-out-left {
+  0% {
+    opacity: 1;
+    -ms-transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    -ms-transform: translateX(-100px);
+  }
+}
+@keyframes fade-out-left {
+  0% {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(-100px);
+  }
+}