mirror of
https://github.com/yunluo/gdk.git
synced 2024-06-27 09:40:09 +02:00
605 lines
12 KiB
CSS
605 lines
12 KiB
CSS
/*
|
|
/$$
|
|
/$$ /$$$$
|
|
| $$ |_ $$ /$$$$$$$
|
|
/$$$$$$$$ | $$ /$$_____/
|
|
|__ $$__/ | $$ | $$$$$$
|
|
| $$ | $$ \____ $$
|
|
|__/ /$$$$$$ /$$$$$$$/
|
|
|______/|_______/
|
|
================================
|
|
Keep calm and get rich.
|
|
Is the best.
|
|
|
|
@Author: Dami
|
|
@Date: 2019-03-18 17:47:07
|
|
* @Last Modified by: suxing
|
|
* @Last Modified time: 2019-08-13 11:23:35
|
|
*/
|
|
|
|
|
|
/*
|
|
SimpleBar style
|
|
*/
|
|
|
|
|
|
[data-simplebar] {
|
|
position: relative;
|
|
flex-direction: column;
|
|
flex-wrap: wrap;
|
|
justify-content: flex-start;
|
|
align-content: flex-start;
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.simplebar-wrapper {
|
|
overflow: hidden;
|
|
width: inherit;
|
|
height: inherit;
|
|
max-width: inherit;
|
|
max-height: inherit;
|
|
}
|
|
|
|
.simplebar-mask {
|
|
direction: inherit;
|
|
position: absolute;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
margin: 0;
|
|
left: 0;
|
|
top: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: auto !important;
|
|
height: auto !important;
|
|
z-index: 0;
|
|
}
|
|
|
|
.simplebar-offset {
|
|
direction: inherit !important;
|
|
box-sizing: inherit !important;
|
|
resize: none !important;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
bottom: 0;
|
|
right: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
-webkit-overflow-scrolling: touch;
|
|
}
|
|
|
|
.simplebar-content-wrapper {
|
|
direction: inherit;
|
|
box-sizing: border-box !important;
|
|
position: relative;
|
|
display: block;
|
|
height: 100%;
|
|
/* Required for horizontal native scrollbar to not appear if parent is taller than natural height */
|
|
width: auto;
|
|
visibility: visible;
|
|
overflow: auto;
|
|
/* Scroll on this element otherwise element can't have a padding applied properly */
|
|
max-width: 100%;
|
|
/* Not required for horizontal scroll to trigger */
|
|
max-height: 100%;
|
|
/* Needed for vertical scroll to trigger */
|
|
}
|
|
|
|
.simplebar-content:before,
|
|
.simplebar-content:after {
|
|
content: " ";
|
|
display: table;
|
|
}
|
|
|
|
.simplebar-placeholder {
|
|
max-height: 100%;
|
|
max-width: 100%;
|
|
width: 100%;
|
|
pointer-events: none;
|
|
}
|
|
|
|
.simplebar-height-auto-observer-wrapper {
|
|
box-sizing: inherit !important;
|
|
height: 100%;
|
|
width: inherit;
|
|
max-width: 1px;
|
|
position: relative;
|
|
float: left;
|
|
max-height: 1px;
|
|
overflow: hidden;
|
|
z-index: -1;
|
|
padding: 0;
|
|
margin: 0;
|
|
pointer-events: none;
|
|
flex-grow: inherit;
|
|
flex-shrink: 0;
|
|
flex-basis: 0;
|
|
}
|
|
|
|
.simplebar-height-auto-observer {
|
|
box-sizing: inherit;
|
|
display: block;
|
|
opacity: 0;
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 1000%;
|
|
width: 1000%;
|
|
min-height: 1px;
|
|
min-width: 1px;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
z-index: -1;
|
|
}
|
|
|
|
.simplebar-track {
|
|
z-index: 1;
|
|
position: absolute;
|
|
right: 0;
|
|
bottom: 0;
|
|
pointer-events: none;
|
|
overflow: hidden;
|
|
}
|
|
|
|
[data-simplebar].simplebar-dragging .simplebar-track {
|
|
pointer-events: all;
|
|
}
|
|
|
|
.simplebar-scrollbar {
|
|
position: absolute;
|
|
right: 2px;
|
|
width: 7px;
|
|
min-height: 10px;
|
|
}
|
|
|
|
.simplebar-scrollbar:before {
|
|
position: absolute;
|
|
content: "";
|
|
background: black;
|
|
border-radius: 7px;
|
|
left: 0;
|
|
right: 0;
|
|
opacity: 0;
|
|
transition: opacity 0.2s linear;
|
|
}
|
|
|
|
.simplebar-track .simplebar-scrollbar.simplebar-visible:before {
|
|
|
|
/* When hovered, remove all transitions from drag handle */
|
|
opacity: 0.5;
|
|
transition: opacity 0s linear;
|
|
}
|
|
|
|
.simplebar-track.simplebar-vertical {
|
|
top: 0;
|
|
width: 11px;
|
|
}
|
|
|
|
.simplebar-track.simplebar-vertical .simplebar-scrollbar:before {
|
|
top: 2px;
|
|
bottom: 2px;
|
|
}
|
|
|
|
.simplebar-track.simplebar-horizontal {
|
|
left: 0;
|
|
height: 11px;
|
|
}
|
|
|
|
.simplebar-track.simplebar-horizontal .simplebar-scrollbar:before {
|
|
height: 100%;
|
|
left: 2px;
|
|
right: 2px;
|
|
}
|
|
|
|
.simplebar-track.simplebar-horizontal .simplebar-scrollbar {
|
|
right: auto;
|
|
left: 0;
|
|
top: 2px;
|
|
height: 7px;
|
|
min-height: 0;
|
|
min-width: 10px;
|
|
width: auto;
|
|
}
|
|
|
|
/* Rtl support */
|
|
[data-simplebar-direction="rtl"] .simplebar-track.simplebar-vertical {
|
|
right: auto;
|
|
left: 0;
|
|
}
|
|
|
|
.hs-dummy-scrollbar-size {
|
|
direction: rtl;
|
|
position: fixed;
|
|
opacity: 0;
|
|
visibility: hidden;
|
|
height: 500px;
|
|
width: 500px;
|
|
overflow-y: hidden;
|
|
overflow-x: scroll;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
POPUP CSS
|
|
--------------------------------------------------------------*/
|
|
.nice-tips,
|
|
.nice-tips-overlay {
|
|
width: 100%;
|
|
height: 100vh;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
|
|
.nice-tips {
|
|
position: fixed;
|
|
display: -webkit-flex;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
pointer-events: none
|
|
}
|
|
|
|
.nice-tips-open {
|
|
z-index: 1031;
|
|
}
|
|
|
|
.nice-tips-overlay {
|
|
position: absolute;
|
|
background: rgba(120, 129, 147, .22);
|
|
opacity: 0;
|
|
-webkit-transition: opacity .3s;
|
|
transition: opacity .3s;
|
|
-webkit-backface-visibility: hidden -webkit-transition-duration: .3s;
|
|
transition-duration: .3s
|
|
}
|
|
|
|
.nice-tips-open .nice-tips-overlay {
|
|
opacity: 1;
|
|
pointer-events: auto;
|
|
}
|
|
|
|
@supports (-webkit-backdrop-filter:blur(10px)) or (backdrop-filter:blur(10px)) {
|
|
.nice-tips-open .nice-tips-overlay {
|
|
-webkit-backdrop-filter: blur(10px);
|
|
backdrop-filter: blur(10px);
|
|
}
|
|
|
|
}
|
|
/*--------------------------------------------------------------
|
|
tips body
|
|
--------------------------------------------------------------*/
|
|
.nice-tips-body {
|
|
position: relative;
|
|
opacity: 0;
|
|
max-width: 400px;
|
|
width: 100%;
|
|
}
|
|
|
|
@media (max-width: 575.98px) {
|
|
.nice-tips-body {
|
|
max-width: 93.3333%;
|
|
}
|
|
}
|
|
|
|
.nice-tips-open .nice-tips-body {
|
|
pointer-events: auto;
|
|
}
|
|
|
|
.nice-tips-xl .nice-tips-body {
|
|
width: 100%;
|
|
max-width: 790px;
|
|
}
|
|
|
|
.nice-tips-scroll .nice-tips-body{
|
|
width: 100%;
|
|
max-width: 790px;
|
|
display: flex;
|
|
-webkit-align-items: center;
|
|
align-items: center;
|
|
-webkit-justify-content: center;
|
|
justify-content: center;
|
|
max-height: calc(100vh - 100px);
|
|
height: calc(100vh - 100px);
|
|
}
|
|
|
|
.nice-tips-lg .nice-tips-body {
|
|
width: 100%;
|
|
max-width: 790px;
|
|
}
|
|
|
|
.nice-tips-md .nice-tips-body {
|
|
max-width: 540px;
|
|
width: 100%;
|
|
}
|
|
|
|
.nice-tips-sm .nice-tips-body {
|
|
max-width: 300px;
|
|
width: auto;
|
|
}
|
|
|
|
.nice-tips-nopd .nice-tips-body {
|
|
max-width: 340px;
|
|
}
|
|
|
|
@media (min-width:768px) and (max-width:991.98px) {
|
|
.nice-tips-scroll .nice-tips-body,
|
|
.nice-tips-xl .nice-tips-body {
|
|
max-width: 670px;
|
|
}
|
|
|
|
}
|
|
|
|
@media (max-width:767.98px) {
|
|
.nice-tips-scroll .nice-tips-body,
|
|
.nice-tips-xl .nice-tips-body {
|
|
height: 100vh;
|
|
}
|
|
.nice-tips-md .nice-tips-body {
|
|
padding:1rem;
|
|
}
|
|
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
tips body animation
|
|
--------------------------------------------------------------*/
|
|
|
|
.nice-tips.nice-tips-open .nice-tips-body,
|
|
.nice-tips.nice-tips-close .nice-tips-body {
|
|
-webkit-animation-duration: .3s;
|
|
animation-duration: .3s;
|
|
-webkit-animation-fill-mode: forwards;
|
|
animation-fill-mode: forwards
|
|
}
|
|
|
|
.nice-tips.nice-tips-open .nice-tips-body {
|
|
-webkit-animation-name: tips-open;
|
|
animation-name: tips-open
|
|
}
|
|
|
|
.nice-tips.nice-tips-close .nice-tips-body {
|
|
-webkit-animation-name: tips-close;
|
|
animation-name: tips-close
|
|
}
|
|
|
|
@-webkit-keyframes tips-open {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 50px, 0)
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0)
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes tips-open {
|
|
0% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 50px, 0);
|
|
transform: translate3d(0, 50px, 0)
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0)
|
|
}
|
|
|
|
}
|
|
|
|
@-webkit-keyframes tips-close {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0)
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 50px, 0)
|
|
}
|
|
|
|
}
|
|
|
|
@keyframes tips-close {
|
|
0% {
|
|
opacity: 1;
|
|
-webkit-transform: translate3d(0, 0, 0);
|
|
transform: translate3d(0, 0, 0)
|
|
}
|
|
|
|
100% {
|
|
opacity: 0;
|
|
-webkit-transform: translate3d(0, 50px, 0);
|
|
transform: translate3d(0, 50px, 0)
|
|
}
|
|
|
|
}
|
|
/*--------------------------------------------------------------
|
|
tips content
|
|
--------------------------------------------------------------*/
|
|
.nice-tips-content {
|
|
background: #fff;
|
|
padding: 1.25rem;
|
|
position: relative;
|
|
border-radius: 4px;
|
|
border: 1px solid #f4f5f9;
|
|
box-shadow: 0 10px 50px -5px rgba(6, 39, 67, 0.12);
|
|
}
|
|
.nice-tips-xl .nice-tips-content{
|
|
padding: 0;
|
|
border: 0;
|
|
width: 100%;
|
|
height: auto;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nice-tips-scroll .nice-tips-content{
|
|
padding: 0;
|
|
border: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.nice-tips-lg .nice-tips-content {
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: 0;
|
|
}
|
|
.nice-tips-sm .nice-tips-content {
|
|
padding: 2rem;
|
|
padding: 1.75rem 2.5rem;
|
|
}
|
|
|
|
.nice-tips-nopd .nice-tips-content {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
@media (max-width:767.98px) {
|
|
.nice-tips-scroll .nice-tips-body .nice-tips-content,
|
|
.nice-tips-xl .nice-tips-body .nice-tips-content {
|
|
box-shadow: none;
|
|
border-radius: 0;
|
|
height: 100vh;
|
|
}
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
tips svg color
|
|
--------------------------------------------------------------*/
|
|
|
|
.nice-tips-content .text-success svg path {
|
|
fill: #28a745;
|
|
}
|
|
|
|
.nice-tips-content .text-danger svg path {
|
|
fill: #ffc107;
|
|
}
|
|
|
|
/*--------------------------------------------------------------
|
|
tips close btn
|
|
--------------------------------------------------------------*/
|
|
.btn-close-tips {
|
|
position: absolute;
|
|
bottom: 0px;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 44;
|
|
cursor: pointer;
|
|
transform: translateY(150%);
|
|
text-align: center;
|
|
}
|
|
|
|
.btn-close-tips svg path {
|
|
fill: #fff
|
|
}
|
|
|
|
@media (max-width:767.98px) {
|
|
.nice-tips-scroll .btn-close-tips{
|
|
transform: translateY(120%);
|
|
}
|
|
.nice-tips-xl .btn-close-tips {
|
|
transform: translateY(-100%);
|
|
}
|
|
.nice-tips-scroll .btn-close-tips svg path ,
|
|
.nice-tips-xl .btn-close-tips svg path {
|
|
fill: #888;
|
|
}
|
|
|
|
}
|
|
@media (min-width:768px) {
|
|
.nice-tips-scroll .btn-close-tips {
|
|
right: 0;
|
|
top: 0;
|
|
bottom: auto;
|
|
left: auto;
|
|
width: auto;
|
|
z-index: 44;
|
|
cursor: pointer;
|
|
transform: translateX(120%);
|
|
}
|
|
}
|
|
|
|
|
|
/*
|
|
post cover style
|
|
*/
|
|
.nice-tips-cover .nice-tips-overlay {
|
|
background: rgb(120, 129, 147);
|
|
}
|
|
|
|
.tips-content-cover {
|
|
max-width: 340px;
|
|
width: 100%;
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: .22rem;
|
|
}
|
|
|
|
.cover-image {
|
|
position: relative;
|
|
overflow: hidden;
|
|
border-radius: .22rem .22rem 0 0;
|
|
padding: 0;
|
|
}
|
|
|
|
.cover-image img {}
|
|
|
|
.cover-overlay {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-filter: blur(10px);
|
|
filter: blur(20px);
|
|
z-index: -1;
|
|
}
|
|
|
|
.cover-overlay:before {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #000;
|
|
opacity: .11;
|
|
}
|
|
|
|
.cover-share {
|
|
text-align: center;
|
|
padding: 1rem 0;
|
|
border-top: 1px solid #f4f6f9;
|
|
}
|
|
|
|
.cover-share a {
|
|
color: #8a92a9;
|
|
padding: .25rem;
|
|
margin: .25rem;
|
|
font-size: 1.125rem;
|
|
}
|
|
|
|
.cover-share a:hover {
|
|
color: #062743;
|
|
}
|
|
|
|
.cover-text {
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 0px;
|
|
left: 0;
|
|
width: 100%;
|
|
z-index: 44;
|
|
cursor: pointer;
|
|
transform: translateY(-36px);
|
|
text-align: center;
|
|
color: #fff;
|
|
font-size: .875rem;
|
|
} |