mirror of
https://git.hmsn.ink/kospo/helptalk/api.git
synced 2026-03-20 00:22:26 +09:00
first
This commit is contained in:
374
sample/dev/talk/bundle/awesome-notifications-3.1.1/style.css
Normal file
374
sample/dev/talk/bundle/awesome-notifications-3.1.1/style.css
Normal file
@@ -0,0 +1,374 @@
|
||||
@keyframes awn-fade-in {
|
||||
0% {
|
||||
opacity: 0
|
||||
}
|
||||
to {
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes awn-fade-out {
|
||||
0% {
|
||||
opacity: 1
|
||||
}
|
||||
to {
|
||||
opacity: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes awn-slide-right {
|
||||
0% {
|
||||
left: 100%;
|
||||
opacity: 0
|
||||
}
|
||||
to {
|
||||
left: 0;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes awn-slide-left {
|
||||
0% {
|
||||
opacity: 0;
|
||||
right: 100%
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes awn-bar {
|
||||
0% {
|
||||
right: 100%
|
||||
}
|
||||
to {
|
||||
right: 0
|
||||
}
|
||||
}
|
||||
|
||||
.awn-popup-loading-dots, .awn-popup-loading-dots:after, .awn-popup-loading-dots:before {
|
||||
animation-fill-mode: both;
|
||||
animation: awn-loading-dots 1s ease-in-out infinite;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
height: 6px;
|
||||
width: 6px
|
||||
}
|
||||
|
||||
.awn-popup-loading-dots {
|
||||
animation-delay: -.16s;
|
||||
color: #fff;
|
||||
display: inline-block;
|
||||
margin-left: 24px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.awn-popup-loading-dots:after, .awn-popup-loading-dots:before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.awn-popup-loading-dots:before {
|
||||
animation-delay: -.32s;
|
||||
left: -16px
|
||||
}
|
||||
|
||||
.awn-popup-loading-dots:after {
|
||||
left: 16px
|
||||
}
|
||||
|
||||
@keyframes awn-loading-dots {
|
||||
0%, 80%, to {
|
||||
box-shadow: 0 0 0 0
|
||||
}
|
||||
40% {
|
||||
box-shadow: 0 0 0 2px
|
||||
}
|
||||
}
|
||||
|
||||
#awn-popup-wrapper {
|
||||
align-items: center;
|
||||
animation-fill-mode: both;
|
||||
animation-name: awn-fade-in;
|
||||
animation-timing-function: ease-out;
|
||||
background: rgba(0, 0, 0, .7);
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
left: 0;
|
||||
opacity: 0;
|
||||
position: fixed;
|
||||
right: 0;
|
||||
top: 0;
|
||||
z-index: 99999
|
||||
}
|
||||
|
||||
#awn-popup-wrapper.awn-hiding {
|
||||
animation-name: awn-fade-out
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-popup-body {
|
||||
background: #fff;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
max-width: 500px;
|
||||
min-width: 320px;
|
||||
padding: 24px;
|
||||
position: relative;
|
||||
word-break: break-word
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-popup-body.awn-popup-confirm {
|
||||
align-items: center;
|
||||
display: flex;
|
||||
flex-direction: column
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-popup-body.awn-popup-confirm .fa {
|
||||
color: #c26700;
|
||||
font-size: 44px
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-popup-body.awn-popup-async-block {
|
||||
background: transparent;
|
||||
color: #fff;
|
||||
font-size: 32px;
|
||||
font-weight: 700;
|
||||
text-align: center
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-popup-title {
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
margin-top: 8px;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-buttons {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 24px;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-buttons .awn-btn {
|
||||
border: 0;
|
||||
border-radius: 4px;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
font-weight: 700;
|
||||
line-height: 32px;
|
||||
transition: background .2s linear;
|
||||
width: 45%
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-buttons-1 .awn-btn {
|
||||
width: 100%
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-buttons .awn-btn-success {
|
||||
background: #40871d
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-buttons .awn-btn-success:hover {
|
||||
background: #367218
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-buttons .awn-btn-cancel {
|
||||
background: #1c76a6
|
||||
}
|
||||
|
||||
#awn-popup-wrapper .awn-buttons .awn-btn-cancel:hover {
|
||||
background: #186690
|
||||
}
|
||||
|
||||
#awn-toast-container {
|
||||
bottom: 24px;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
right: 24px;
|
||||
z-index: 99998
|
||||
}
|
||||
|
||||
#awn-toast-container.awn-top-left, #awn-toast-container.awn-top-right {
|
||||
bottom: auto;
|
||||
top: 24px
|
||||
}
|
||||
|
||||
#awn-toast-container.awn-top-left .awn-toast:first-child, #awn-toast-container.awn-top-right .awn-toast:first-child {
|
||||
margin-top: 16px
|
||||
}
|
||||
|
||||
#awn-toast-container.awn-bottom-left, #awn-toast-container.awn-top-left {
|
||||
left: 24px;
|
||||
right: auto
|
||||
}
|
||||
|
||||
#awn-toast-container.awn-bottom-left .awn-toast, #awn-toast-container.awn-top-left .awn-toast {
|
||||
animation-name: awn-slide-left;
|
||||
right: 100%
|
||||
}
|
||||
|
||||
#awn-toast-container.awn-bottom-left .awn-toast.awn-hiding, #awn-toast-container.awn-top-left .awn-toast.awn-hiding {
|
||||
right: 0
|
||||
}
|
||||
|
||||
#awn-toast-container.awn-bottom-right .awn-toast, #awn-toast-container.awn-top-right .awn-toast {
|
||||
animation-name: awn-slide-right;
|
||||
left: 100%
|
||||
}
|
||||
|
||||
#awn-toast-container.awn-bottom-right .awn-toast.awn-hiding, #awn-toast-container.awn-top-right .awn-toast.awn-hiding {
|
||||
left: 0
|
||||
}
|
||||
|
||||
.awn-toast {
|
||||
animation-fill-mode: both;
|
||||
animation-timing-function: linear;
|
||||
background: #ebebeb;
|
||||
border-radius: 6px;
|
||||
color: gray;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-top: 16px;
|
||||
opacity: 0;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
width: 320px
|
||||
}
|
||||
|
||||
.awn-toast-content {
|
||||
word-break: break-word
|
||||
}
|
||||
|
||||
.awn-toast-label {
|
||||
color: gray;
|
||||
display: block;
|
||||
font-size: 18px;
|
||||
text-transform: uppercase
|
||||
}
|
||||
|
||||
.awn-toast-icon {
|
||||
align-items: center;
|
||||
bottom: 0;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
top: 6px
|
||||
}
|
||||
|
||||
.awn-toast-icon .fa {
|
||||
color: gray;
|
||||
font-size: 44px
|
||||
}
|
||||
|
||||
.awn-toast-wrapper {
|
||||
border: 2px solid #d1d1d1;
|
||||
border-radius: 6px;
|
||||
padding: 22px 88px 16px 16px
|
||||
}
|
||||
|
||||
.awn-toast-progress-bar {
|
||||
height: 6px;
|
||||
left: 0;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0
|
||||
}
|
||||
|
||||
.awn-toast-progress-bar:after {
|
||||
animation-duration: inherit;
|
||||
animation-fill-mode: both;
|
||||
animation-name: awn-bar;
|
||||
animation-timing-function: linear;
|
||||
background: gray;
|
||||
content: " ";
|
||||
height: 6px;
|
||||
position: absolute;
|
||||
right: 100%;
|
||||
top: 0;
|
||||
width: 100%
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-progress-bar-paused .awn-toast-progress-bar:after {
|
||||
animation-play-state: paused
|
||||
}
|
||||
|
||||
.awn-toast.awn-hiding {
|
||||
animation-name: awn-fade-out !important
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-success {
|
||||
background: #dff8d3;
|
||||
color: #40871d
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-success .awn-toast-wrapper {
|
||||
border-color: #a7d590
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-success .fa, .awn-toast.awn-toast-success b {
|
||||
color: #40871d
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-success .awn-toast-progress-bar:after {
|
||||
background: #40871d
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-info {
|
||||
background: #d3ebf8;
|
||||
color: #1c76a6
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-info .awn-toast-wrapper {
|
||||
border-color: #9fd3ef
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-info .fa, .awn-toast.awn-toast-info b {
|
||||
color: #1c76a6
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-info .awn-toast-progress-bar:after {
|
||||
background: #1c76a6
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-alert {
|
||||
background: #f8d5d3;
|
||||
color: #a92019
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-alert .awn-toast-wrapper {
|
||||
border-color: #f0a29d
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-alert .fa, .awn-toast.awn-toast-alert b {
|
||||
color: #a92019
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-alert .awn-toast-progress-bar:after {
|
||||
background: #a92019
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-warning {
|
||||
background: #ffe7cc;
|
||||
color: #c26700
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-warning .awn-toast-wrapper {
|
||||
border-color: #ffc480
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-warning .fa, .awn-toast.awn-toast-warning b {
|
||||
color: #c26700
|
||||
}
|
||||
|
||||
.awn-toast.awn-toast-warning .awn-toast-progress-bar:after {
|
||||
background: #c26700
|
||||
}
|
||||
|
||||
[class^=awn-] {
|
||||
box-sizing: border-box
|
||||
}
|
||||
Reference in New Issue
Block a user