← All changes | admin/resources/toast.css +201 -0 1.6.2 → 1.8.16 View file →

		@@ -1,0 +1,201 @@
	1	+/* toast common */
	2	+
	3	+.vbo-toast-wrapper {
	4	+ position: fixed;
	5	+ width: 400px;
	6	+ z-index: 2147483647;
	7	+
	8	+ transition: 0.4s ease all;
	9	+ -moz-transition: 0.4s ease all;
	10	+ -webkit-transition: 0.4s ease all;
	11	+}
	12	+.vbo-toast-wrapper.clickable {
	13	+ cursor: pointer;
	14	+}
	15	+.vbo-toast-wrapper .toast-message {
	16	+ border-radius: 10px;
	17	+}
	18	+.vbo-toast-wrapper .toast-message-content {
	19	+ padding: 10px 15px;
	20	+ margin: 0;
	21	+ font-size: 14px;
	22	+ font-weight: bold;
	23	+ border: 0;
	24	+ color: #444;
	25	+ background-color: rgba(64, 64, 64, 0.15);
	26	+ border-radius: 10px;
	27	+ box-shadow: 0 2px 5px rgba(0,0,0,.20);
	28	+}
	29	+.vbo-toast-wrapper .toast-message-content.error {
	30	+ background-color: rgba(153, 0, 0, 0.90);
	31	+ color: #ddd !important;
	32	+}
	33	+.vbo-toast-wrapper .toast-message-content.success {
	34	+ background-color: rgba(112, 204, 135, 0.90);
	35	+}
	36	+.vbo-toast-wrapper .toast-message-content.warning {
	37	+ background-color: rgba(224, 137, 80, 0.90);
	38	+}
	39	+.vbo-toast-wrapper .toast-message-content.notice {
	40	+ background-color: #fff;
	41	+}
	42	+
	43	+/* toast hidden positions */
	44	+.vbo-toast-wrapper.top-left,
	45	+.vbo-toast-wrapper.top-center,
	46	+.vbo-toast-wrapper.top-right,
	47	+.vbo-toast-wrapper.center-center {
	48	+ /*
	49	+ Use a higher margin to avoid seeing the toast on
	50	+ browsers (like Safari) that lets the user to scroll
	51	+ even if the page reached the end.
	52	+ Same thing for the bottom position.
	53	+ */
	54	+ top: -100px;
	55	+ transform: translateY(-100%);
	56	+}
	57	+.vbo-toast-wrapper.top-left,
	58	+.vbo-toast-wrapper.bottom-left {
	59	+ left: 10px;
	60	+}
	61	+.vbo-toast-wrapper.top-right,
	62	+.vbo-toast-wrapper.bottom-right {
	63	+ right: 10px;
	64	+}
	65	+.vbo-toast-wrapper.top-center,
	66	+.vbo-toast-wrapper.center-center {
	67	+ left: 50%;
	68	+ transform: translate(-50%, -100%);
	69	+}
	70	+
	71	+.vbo-toast-wrapper.bottom-left,
	72	+.vbo-toast-wrapper.bottom-center,
	73	+.vbo-toast-wrapper.bottom-right {
	74	+ bottom: -100px;
	75	+ transform: translateY(100%);
	76	+}
	77	+.vbo-toast-wrapper.bottom-center {
	78	+ left: 50%;
	79	+ transform: translate(-50%, 100%);
	80	+}
	81	+
	82	+.vbo-toast-wrapper.center-center {
	83	+ opacity: 0;
	84	+}
	85	+
	86	+/* toast slide-in positions */
	87	+
	88	+.vbo-toast-wrapper.top-left.toast-slide-in,
	89	+.vbo-toast-wrapper.top-center.toast-slide-in,
	90	+.vbo-toast-wrapper.top-right.toast-slide-in {
	91	+ transform: translateY(0%);
	92	+ top: 10px;
	93	+}
	94	+.vbo-toast-wrapper.bottom-left.toast-slide-in,
	95	+.vbo-toast-wrapper.bottom-center.toast-slide-in,
	96	+.vbo-toast-wrapper.bottom-right.toast-slide-in {
	97	+ transform: translateY(0%);
	98	+ bottom: 15px;
	99	+}
	100	+
	101	+.vbo-toast-wrapper.top-center.toast-slide-in,
	102	+.vbo-toast-wrapper.bottom-center.toast-slide-in {
	103	+ transform: translate(-50%, 0%);
	104	+}
	105	+
	106	+.vbo-toast-wrapper.center-center.toast-slide-in {
	107	+ top: 50%;
	108	+ transform: translate(-50%, -50%);
	109	+ opacity: 1;
	110	+}
	111	+
	112	+/* shake effect */
	113	+
	114	+.vbo-toast-wrapper.do-shake {
	115	+ backface-visibility: hidden;
	116	+ perspective: 1000px;
	117	+}
	118	+
	119	+.vbo-toast-wrapper.top-center.do-shake,
	120	+.vbo-toast-wrapper.bottom-center.do-shake {
	121	+ animation: shake-animation-center 0.82s cubic-bezier(.36, .07, .19, .97) both;
	122	+ transform: translate3d(-50%, 0, 0) !important;
	123	+}
	124	+@keyframes shake-animation-center {
	125	+ 10%, 90% {
	126	+ transform: translate3d(-50.5%, 0, 0);
	127	+ }
	128	+
	129	+ 20%, 80% {
	130	+ transform: translate3d(-49%, 0, 0);
	131	+ }
	132	+
	133	+ 30%, 50%, 70% {
	134	+ transform: translate3d(-52%, 0, 0);
	135	+ }
	136	+
	137	+ 40%, 60% {
	138	+ transform: translate3d(-48%, 0, 0);
	139	+ }
	140	+}
	141	+
	142	+.vbo-toast-wrapper.top-left.do-shake,
	143	+.vbo-toast-wrapper.top-right.do-shake,
	144	+.vbo-toast-wrapper.bottom-left.do-shake,
	145	+.vbo-toast-wrapper.bottom-right.do-shake {
	146	+ animation: shake-animation-side 0.82s cubic-bezier(.36, .07, .19, .97) both;
	147	+}
	148	+@keyframes shake-animation-side {
	149	+ 10%, 90% {
	150	+ transform: translate3d(-0.5%, 0, 0);
	151	+ }
	152	+
	153	+ 20%, 80% {
	154	+ transform: translate3d(1%, 0, 0);
	155	+ }
	156	+
	157	+ 30%, 50%, 70% {
	158	+ transform: translate3d(-2%, 0, 0);
	159	+ }
	160	+
	161	+ 40%, 60% {
	162	+ transform: translate3d(2%, 0, 0);
	163	+ }
	164	+}
	165	+
	166	+@media screen and (max-width: 480px) {
	167	+ .vbo-toast-wrapper {
	168	+ right: 10px !important;
	169	+ width: calc(100% - 20px) !important;
	170	+ }
	171	+}
	172	+
	173	+/* toast message template */
	174	+
	175	+.vbo-pushnotif-wrapper {
	176	+ display: flex;
	177	+ align-items: center;
	178	+}
	179	+.vbo-pushnotif-wrapper .push-notif-icon {
	180	+ margin-right: 10px;
	181	+}
	182	+.vbo-pushnotif-wrapper .push-notif-icon i {
	183	+ font-size: 32px;
	184	+ font-weight: bold;
	185	+}
	186	+.vbo-pushnotif-wrapper .push-notif-icon img {
	187	+ width: 48px;
	188	+ height: 48px;
	189	+ border-radius: 50%;
	190	+ object-fit: cover;
	191	+}
	192	+.vbo-pushnotif-wrapper .push-notif-text .push-notif-title {
	193	+ font-size: larger;
	194	+ font-weight: bold;
	195	+}
	196	+.vbo-pushnotif-wrapper .push-notif-text .push-notif-body {
	197	+ font-weight: 500;
	198	+}
	199	+.vbo-pushnotif-wrapper .push-notif-text .push-notif-title + .push-notif-body {
	200	+ margin-top: 5px;
	201	+}