1654 lines
34 KiB
CSS
1654 lines
34 KiB
CSS
@charset "UTF-8";
|
||
|
||
/* ----
|
||
|
||
# Kico Style 1.0
|
||
# By: Dreamer-Paul
|
||
# Last Update: 2022.1.8
|
||
|
||
一个可口的极简响应式前端框架。
|
||
|
||
本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com
|
||
|
||
---- */
|
||
|
||
/* 0 - 全局
|
||
-------------------------------- */
|
||
/*--------------------------------------------------------------
|
||
## Links
|
||
--------------------------------------------------------------*/
|
||
a {
|
||
color: #e67474;
|
||
outline: none;
|
||
transition: color .2s ease-out, border .2s ease-out, opacity .2s ease-out
|
||
}
|
||
a:hover,
|
||
a:focus,
|
||
a:active {
|
||
color: orange
|
||
}
|
||
a:focus {
|
||
outline: none
|
||
}
|
||
a:hover,
|
||
a:active {
|
||
outline: none;
|
||
color: orange
|
||
}
|
||
.links {
|
||
margin-bottom: 80px
|
||
}
|
||
.links ul {
|
||
margin: 0;
|
||
list-style: none;
|
||
padding: 0;
|
||
width: 100%;
|
||
display: inline-block
|
||
}
|
||
.links ul li {
|
||
width: 32%;
|
||
float: left;
|
||
border: 1px solid #ececec;
|
||
padding: 10px 30px;
|
||
margin: 4px;
|
||
position: relative;
|
||
overflow: hidden;
|
||
transition: all .3s;
|
||
border-radius: 10px;
|
||
/** fix #35 友链多了以后显示BUG */
|
||
height: 100px;
|
||
}
|
||
.links ul li img {
|
||
float: right;
|
||
box-shadow: inset 0 0 10px #000;
|
||
padding: 5px;
|
||
opacity: 1;
|
||
transform: rotate(0deg);
|
||
-webkit-transform: rotate(0deg);
|
||
-moz-transform: rotate(0deg);
|
||
-o-transform: rotate(0deg);
|
||
-ms-transform: rotate(0deg);
|
||
transition: all ease 1s;
|
||
-webkit-transition: all ease 1s;
|
||
-moz-transition: all ease 1s;
|
||
-o-transition: all ease 1s;
|
||
margin-top: 5px;
|
||
width: 65px;
|
||
height: 65px;
|
||
padding: 2px;
|
||
border-radius: 100%
|
||
}
|
||
.links ul li:hover img {
|
||
transform: rotate(360deg);
|
||
-webkit-transform: rotate(360deg);
|
||
-moz-transform: rotate(360deg);
|
||
-o-transform: rotate(360deg);
|
||
-ms-transform: rotate(360deg)
|
||
}
|
||
.links ul li:before {
|
||
content: "";
|
||
background-color: orange;
|
||
transform: skew(45deg, 0);
|
||
width: 0;
|
||
height: 100%;
|
||
position: absolute;
|
||
top: 0;
|
||
left: -60px;
|
||
z-index: -1;
|
||
transition: all .5s;
|
||
opacity: 0.2;
|
||
}
|
||
.links ul li:hover {
|
||
color: #27323a;
|
||
border: 1px solid orange
|
||
}
|
||
.links ul li:hover:before {
|
||
width: 180%
|
||
}
|
||
.linkdes {
|
||
color: #949494;
|
||
font-size: 13px;
|
||
padding: 10px 0;
|
||
border-top: 1px dashed #ddd;
|
||
text-overflow: ellipsis;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
line-height: 25px;
|
||
transition: all .5s
|
||
}
|
||
.links ul li:hover .linkdes {
|
||
border-top: 1px dashed #fff
|
||
}
|
||
span.linkss-title {
|
||
font-size: 25px;
|
||
text-align: center;
|
||
display: block;
|
||
margin: 50px 0 30px;
|
||
letter-spacing: 5px
|
||
}
|
||
@media (max-width:630px) {
|
||
.links ul li {
|
||
width: 100% !important
|
||
}
|
||
.we-content li {
|
||
width: 100%;
|
||
margin-top: 0
|
||
}
|
||
.we-icon {
|
||
top: 50px !important
|
||
}
|
||
.wtitle {
|
||
top: 130px !important
|
||
}
|
||
.sub-text {
|
||
top: 160px !important
|
||
}
|
||
.admin-login,
|
||
.wesite-des {
|
||
display: none
|
||
}
|
||
.wesite-title {
|
||
float: none;
|
||
text-align: center;
|
||
border-right: none;
|
||
padding-right: 0
|
||
}
|
||
}
|
||
.links ul li {
|
||
width: 48.6%
|
||
}
|
||
.links ul li:before {
|
||
display: none
|
||
}
|
||
.links ul li:hover .sitename {
|
||
color: orange
|
||
}
|
||
.links ul li:hover .linkdes {
|
||
color: #949494;
|
||
border-top: 1px dashed #ddd
|
||
}
|
||
.link-title span.fake-title {
|
||
padding-left: 10px;
|
||
border-left: 3px solid orange
|
||
}
|
||
.lazyload {
|
||
-moz-filter: blur(0px);
|
||
-ms-filter: blur(0px);
|
||
filter: blur(0px);
|
||
transition: .3s filter linear, .3s -webkit-filter linear
|
||
}
|
||
.lazyload[src*="#lazyload-blur"],
|
||
.lazyload[style*="#lazyload-blur"] {
|
||
-moz-filter: blur(10px);
|
||
-ms-filter: blur(10px);
|
||
filter: blur(10px)
|
||
}
|
||
span.sitename {
|
||
color: orange;
|
||
padding-bottom: 10px;
|
||
display: block;
|
||
transition: all .3s;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
-o-text-overflow: ellipsis;
|
||
white-space: nowrap
|
||
}
|
||
|
||
|
||
|
||
body, dl, dt, dd, ol, ul,
|
||
h1, h2, h3, h4, h5, h6, p,
|
||
pre, code, form,
|
||
fieldset, legend, figure{
|
||
margin: 0;
|
||
padding: 0;
|
||
}
|
||
|
||
*, *:before, *:after{ box-sizing: border-box }
|
||
|
||
:root{
|
||
/* 内设颜色 */
|
||
--red: #ea644a;
|
||
--yellow: #ffb03a;
|
||
--blue: #3498db;
|
||
--green: #27a17e;
|
||
|
||
--gray: #ccc;
|
||
--light-gray: #ddd;
|
||
--lighter-gray: #eee;
|
||
|
||
/* 主色 */
|
||
--primary: var(--blue);
|
||
/* 次色 */
|
||
--secondly: var(--yellow);
|
||
/* 圆角 */
|
||
--radius: .5em;
|
||
}
|
||
|
||
:root{
|
||
color: #353535;
|
||
-webkit-text-size-adjust: 100%;
|
||
-webkit-tap-highlight-color: transparent;
|
||
font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
|
||
}
|
||
|
||
@media screen and (max-width: 768px){
|
||
:root.font-auto{ font-size: 14px }
|
||
}
|
||
|
||
@media screen and (min-width: 1921px){
|
||
:root.font-auto{ font-size: 18px }
|
||
}
|
||
|
||
@media (prefers-reduced-motion: no-preference){
|
||
:root{ scroll-behavior: smooth }
|
||
}
|
||
|
||
/* - 选择内容 */
|
||
::-moz-selection{
|
||
color: #fff;
|
||
background-color: rgba(0, 0, 0, .66);
|
||
}
|
||
|
||
::selection{
|
||
color: #fff;
|
||
background-color: rgba(0, 0, 0, .66);
|
||
}
|
||
|
||
/* - 滚动条 */
|
||
::-webkit-scrollbar{
|
||
width: 10px;
|
||
height: 10px;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb{
|
||
background: #ccc;
|
||
background: var(--gray);
|
||
border-radius: 5px;
|
||
}
|
||
::-webkit-scrollbar-track{ border-radius: 5px }
|
||
::-webkit-scrollbar-track:hover{ background: rgba(0, 0, 0, .05) }
|
||
|
||
body::-webkit-scrollbar-track{ border-radius: 0 }
|
||
|
||
/* - 辅助类 */
|
||
.float-none{ float: none !important }
|
||
.float-left{ float: left !important }
|
||
.float-right{ float: right !important }
|
||
|
||
.clearfix:after{
|
||
content: '';
|
||
clear: both;
|
||
display: block;
|
||
}
|
||
|
||
.font-s{ font-size: .875em }
|
||
.font-m{ font-size: 1.125em }
|
||
.font-l{ font-size: 1.25em }
|
||
|
||
.text-left{ text-align: left !important }
|
||
.text-right{ text-align: right !important }
|
||
.text-center{ text-align: center !important }
|
||
.text-justify{ text-align: justify !important }
|
||
|
||
.text-break{ word-break: break-all !important }
|
||
.text-nowrap{ white-space: nowrap !important }
|
||
|
||
/* 1 - 容器
|
||
-------------------------------- */
|
||
.wrap{
|
||
margin: 0 auto;
|
||
max-width: 75em;
|
||
padding: 0 1.25em;
|
||
box-sizing: content-box;
|
||
}
|
||
|
||
.wrap.min{ max-width: 50em }
|
||
.wrap.mid{ max-width: 65em }
|
||
.wrap.max{ max-width: 85em }
|
||
.wrap.full{ max-width: 100% }
|
||
|
||
.wrap.thin{ padding: 0 .75em }
|
||
.wrap.thick{ padding: 0 1.5em }
|
||
.wrap.clear{
|
||
padding-left: 0;
|
||
padding-right: 0;
|
||
}
|
||
|
||
/* 2 - 元素
|
||
-------------------------------- */
|
||
h1{ font-size: 2em }
|
||
|
||
h1, h2, h3, h4, h5, h6{ margin-bottom: 1rem }
|
||
|
||
h1:last-child, h2:last-child, h3:last-child, h4:last-child, h5:last-child, h6:last-child, p:last-child{ margin-bottom: 0 }
|
||
|
||
p{
|
||
line-height: 1.8;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
a{
|
||
color: #3498db;
|
||
color: var(--primary);
|
||
text-decoration: none;
|
||
}
|
||
|
||
a:hover{
|
||
color: #ffc670;
|
||
color: var(--secondly);
|
||
}
|
||
|
||
abbr[title]{
|
||
cursor: help;
|
||
text-decoration: none;
|
||
border-bottom: 1px dotted;
|
||
}
|
||
|
||
em, mark, kbd{
|
||
font-size: .85em;
|
||
padding: .25em .5em;
|
||
border-radius: .5em;
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
em{
|
||
color: #fff;
|
||
font-style: normal;
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
}
|
||
em.red{ background: var(--red) }
|
||
em.yellow{ background: var(--yellow) }
|
||
em.blue{ background: var(--blue) }
|
||
em.green{ background: var(--green) }
|
||
|
||
kbd{
|
||
color: #fff;
|
||
background: #333;
|
||
font-family: 'Consolas', 'Courier New', monospace, "微软雅黑";
|
||
}
|
||
|
||
img, svg, audio, video, iframe{
|
||
max-width: 100%;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
audio, video{ outline: none }
|
||
|
||
/* - 文章 */
|
||
article{
|
||
letter-spacing: .03em;
|
||
}
|
||
|
||
article a{
|
||
word-break: break-all;
|
||
}
|
||
|
||
article > *{ margin-bottom: 1em }
|
||
article > *:last-child{ margin-bottom: 0 }
|
||
|
||
article h1, article h2, article h3{ font-size: 1.2em }
|
||
article h4, article h5, article h6{ font-size: 1.1em }
|
||
|
||
article ul, article ol, article dl{ line-height: 1.8 }
|
||
|
||
/* - 按钮 */
|
||
button{
|
||
margin: 0;
|
||
outline: 0;
|
||
font: inherit;
|
||
}
|
||
|
||
.btn{
|
||
color: inherit;
|
||
cursor: pointer;
|
||
background: #fff;
|
||
padding: .5em 1em;
|
||
border-radius: .5em;
|
||
border-radius: var(--radius);
|
||
display: inline-block;
|
||
border: 1px solid transparent;
|
||
}
|
||
.btn:hover{ color: inherit }
|
||
|
||
/* -- 禁用的按钮 */
|
||
.btn[disabled]{
|
||
opacity: .5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
/* -- 按钮尺寸 */
|
||
.btn.small{ font-size: .85em }
|
||
.btn.middle, .btn.large{ padding: .75em 1.5em }
|
||
.btn.large{ font-size: 1.2em }
|
||
|
||
/* -- 按钮颜色 */
|
||
.btn.red, .btn.yellow, .btn.blue, .btn.green{ color: #fff }
|
||
|
||
.btn.red{
|
||
background: #ea644a;
|
||
background: var(--red);
|
||
}
|
||
.btn.yellow{
|
||
background: #ffb03a;
|
||
background: var(--yellow);
|
||
}
|
||
.btn.blue{
|
||
background: #3498db;
|
||
background: var(--blue);
|
||
}
|
||
.btn.green{
|
||
background: #27a17e;
|
||
background: var(--green);
|
||
}
|
||
.btn.transparent{ background: transparent }
|
||
|
||
/* - 代码 */
|
||
pre, code{
|
||
word-break: normal;
|
||
font-family: 'Consolas', 'Courier New', monospace;
|
||
}
|
||
|
||
pre{
|
||
tab-size: 4;
|
||
padding: 1em;
|
||
color: #fff;
|
||
overflow: auto;
|
||
background-color: #333;
|
||
border-radius: .5em;
|
||
border-radius: var(--radius);
|
||
}
|
||
|
||
:not(pre) > code{
|
||
color: #c40b00;
|
||
font-size: 85%;
|
||
word-wrap: normal;
|
||
border-radius: .5em;
|
||
border-radius: var(--radius);
|
||
padding: .25em .5em;
|
||
word-break: break-all;
|
||
background-color: #f7f2f4;
|
||
}
|
||
|
||
/* - 项目列表 */
|
||
ul, ol{ margin-left: 1.25em }
|
||
ul.clear, ol.clear{
|
||
margin-left: 0;
|
||
list-style: none;
|
||
}
|
||
|
||
dl dd{ margin-left: 1.5em }
|
||
dl dd:before{
|
||
content: "--";
|
||
margin-right: .25em;
|
||
}
|
||
|
||
/* - 补间动画 */
|
||
a, .btn{
|
||
transition: color .3s, background .3s;
|
||
-o-transition: color .3s, background .3s;
|
||
-moz-transition: color .3s, background .3s;
|
||
-webkit-transition: color .3s, background .3s;
|
||
}
|
||
|
||
/* - 引用 */
|
||
blockquote{
|
||
margin: 0 0 1em;
|
||
line-height: 1.8;
|
||
font-style: oblique;
|
||
background: #f5fafd;
|
||
padding: 1em 1em 1em 2em;
|
||
border-left: 5px #3498db solid;
|
||
}
|
||
|
||
cite{
|
||
color: #3498db;
|
||
color: var(--primary);
|
||
font-style: normal;
|
||
}
|
||
|
||
/* - 分割线 */
|
||
hr{
|
||
border: 0;
|
||
margin: 1.5em 0;
|
||
border-top: 1px #ccc solid;
|
||
}
|
||
|
||
/* - 表单 */
|
||
input[disabled], textarea[disabled]{
|
||
cursor: no-drop !important;
|
||
}
|
||
|
||
input, select, textarea{
|
||
outline: none;
|
||
font: inherit;
|
||
max-width: 100%;
|
||
background: none;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
input[type*="date"], input[type="email"], input[type="month"], input[type="number"], input[type="password"], input[type="search"], input[type="tel"], input[type="text"], input[type="time"], input[type="url"], input[type="week"],
|
||
select, textarea{
|
||
padding: .5em;
|
||
color: inherit;
|
||
border-radius: .5em;
|
||
border-radius: var(--radius);
|
||
border: #ccc 1px solid;
|
||
border-color: var(--gray);
|
||
min-height: calc(2.5em + 2px);
|
||
}
|
||
|
||
input.invalid, input:out-of-range{
|
||
border-color: #c40b00;
|
||
background: rgba(255, 0, 0, .1);
|
||
}
|
||
|
||
::-webkit-file-upload-button{
|
||
color: #fff;
|
||
border: none;
|
||
outline: none;
|
||
padding: .5em 1em;
|
||
margin-right: .5em;
|
||
display: inline-block;
|
||
border-radius: .5em;
|
||
border-radius: var(--radius);
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
input[type="range"]{
|
||
margin: 0;
|
||
height: 100%;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
cursor: ew-resize;
|
||
cursor: grab;
|
||
overflow: hidden;
|
||
min-height: 1.5rem;
|
||
}
|
||
|
||
input[type="range"]:focus{
|
||
box-shadow: none;
|
||
outline: none;
|
||
}
|
||
|
||
input[type="range"]:active::-webkit-slider-thumb{
|
||
border-color: #3498db;
|
||
border-color: var(--primary);
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
input[type="range"]:active::-moz-range-thumb{
|
||
border-color: #3498db;
|
||
border-color: var(--primary);
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
input[type="range"]:focus::-ms-thumb{
|
||
border-color: #9c27b0;
|
||
background-color: #673ab7;
|
||
}
|
||
|
||
input[type="range"]::-moz-focus-outer{ border: 0 }
|
||
|
||
input[type="range"]::-webkit-slider-runnable-track{
|
||
content: '';
|
||
height: 2px;
|
||
pointer-events: none;
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
input[type="range"]::-webkit-slider-thumb{
|
||
width: 1em;
|
||
height: 1em;
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
background: #fff;
|
||
border-radius: 5em;
|
||
margin-top: calc(-.5em + 1px);
|
||
border: 1px solid rgba(0, 0, 0, .15);
|
||
transition: .3s border-color, .3s background-color;
|
||
}
|
||
|
||
input[type="range"]::-moz-range-track{
|
||
height: 2px;
|
||
background: rgba(0, 50, 126, .12);
|
||
}
|
||
|
||
input[type="range"]::-moz-range-thumb{
|
||
width: 1em;
|
||
height: 1em;
|
||
background: #fff;
|
||
border-radius: 5em;
|
||
margin-top: calc(-.5em + 1px);
|
||
border: 1px solid rgba(0, 0, 0, .15);
|
||
transition: .3s border-color, .3s background-color;
|
||
}
|
||
|
||
input[type="range"]::-moz-range-progress{
|
||
border: 0;
|
||
height: 2px;
|
||
margin-top: 0;
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
select{
|
||
-webkit-appearance: none;
|
||
appearance: none;
|
||
padding-right: 1.75em;
|
||
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 5'%3E%3Cpath fill='none' stroke='%23333' stroke-linecap='round' stroke-linejoin='round' d='M.5.5l4.5 4 4.5-4'/%3E%3C/svg%3E") right .5rem center/.75em no-repeat;
|
||
}
|
||
|
||
select[multiple], select[size]:not([size="1"]){
|
||
background: none;
|
||
}
|
||
|
||
textarea{
|
||
display: block;
|
||
overflow: auto;
|
||
resize: vertical;
|
||
}
|
||
|
||
progress{
|
||
overflow: auto;
|
||
border-radius: 50px;
|
||
}
|
||
|
||
progress::-webkit-progress-bar{
|
||
background-color: #eee;
|
||
}
|
||
|
||
/* - 表单模组 */
|
||
|
||
/* -- 单选多选框 */
|
||
input[type="checkbox"], input[type="radio"]{
|
||
float: left;
|
||
width: 1.5em;
|
||
height: 1.5em;
|
||
cursor: pointer;
|
||
position: relative;
|
||
margin: 0 .5em 0 0;
|
||
-moz-appearance: none;
|
||
-webkit-appearance: none;
|
||
}
|
||
|
||
input[type="checkbox"]:before, input[type="radio"]:before{
|
||
content: '';
|
||
width: 100%;
|
||
height: 100%;
|
||
display: block;
|
||
border-radius: .2em;
|
||
box-shadow: 0 0 0 1px #ccc inset;
|
||
box-shadow: 0 0 0 1px var(--gray) inset;
|
||
transition: background .3s, box-shadow .3s;
|
||
}
|
||
|
||
input[type="checkbox"]:after{
|
||
top: 10%;
|
||
left: 10%;
|
||
width: 30%;
|
||
height: 60%;
|
||
content: '';
|
||
position: absolute;
|
||
transition: transform .3s;
|
||
transform-origin: 100% 100%;
|
||
border-right: .15em solid #fff;
|
||
border-bottom: .15em solid #fff;
|
||
transform: rotate(45deg) scale(0);
|
||
}
|
||
|
||
input[type="radio"], input[type="radio"]:before{ border-radius: 100% }
|
||
input[type="checkbox"], input[type="checkbox"]:before{ border-radius: .2em }
|
||
|
||
input[type="radio"]:checked:before{
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
border: 2px solid #3498db;
|
||
border-color: var(--primary);
|
||
box-shadow: 0 0 0 .2em #fff inset;
|
||
}
|
||
|
||
input[type="checkbox"]:checked:before{
|
||
box-shadow: none;
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
}
|
||
|
||
input[type="checkbox"]:checked:after{
|
||
transform: rotate(45deg) scale(1);
|
||
}
|
||
|
||
/* -- 开关按钮 */
|
||
input[type="checkbox"].switch{
|
||
width: 4em;
|
||
height: 2em;
|
||
float: none;
|
||
cursor: pointer;
|
||
background: #eee;
|
||
background: var(--lighter-gray);
|
||
position: relative;
|
||
border-radius: 50px;
|
||
border: 1px solid #ccc;
|
||
border-color: var(--gray);
|
||
box-sizing: content-box;
|
||
transition: border .3s, background .3s;
|
||
}
|
||
|
||
input[type="checkbox"].switch:before{
|
||
margin: 0;
|
||
border: 0;
|
||
width: 2em;
|
||
height: 2em;
|
||
content: '';
|
||
display: block;
|
||
box-shadow: none;
|
||
background: #fff;
|
||
position: absolute;
|
||
border-radius: 100%;
|
||
transition: transform .3s;
|
||
}
|
||
|
||
input[type="checkbox"].switch:after{ content: normal }
|
||
|
||
input[type="checkbox"].switch:checked{
|
||
box-shadow: none;
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
border-color: #3498db;
|
||
border-color: var(--primary);
|
||
}
|
||
|
||
input.switch:checked:before{
|
||
background: #fff;
|
||
transform: translateX(2em);
|
||
}
|
||
|
||
/* - 表单小组 */
|
||
fieldset{
|
||
border: none;
|
||
margin-bottom: 2em;
|
||
}
|
||
|
||
fieldset > *{ margin-bottom: 1em }
|
||
fieldset:last-child{ margin-bottom: 0 }
|
||
|
||
fieldset legend{ margin: 0 0 1em }
|
||
|
||
fieldset input:not([type="checkbox"]):not([type="radio"]), fieldset select, fieldset textarea{ width: 100% }
|
||
|
||
/* -- 控件模块 */
|
||
fieldset label{
|
||
display: block;
|
||
user-select: none;
|
||
margin-bottom: 1em;
|
||
}
|
||
|
||
/* -- 控件标题 */
|
||
fieldset label > span:first-child{
|
||
opacity: .6;
|
||
font-size: .85em;
|
||
white-space: nowrap;
|
||
margin-bottom: .5rem;
|
||
display: inline-block;
|
||
}
|
||
|
||
fieldset label.required > span:first-child:after{
|
||
color: red;
|
||
content: "*";
|
||
margin-left: .25em;
|
||
}
|
||
|
||
/* -- 单行组合 */
|
||
fieldset .has-group{ display: flex }
|
||
|
||
fieldset .has-group input:not([type="checkbox"]):not([type="radio"]){
|
||
width: auto;
|
||
flex: 1 1 auto;
|
||
border-right: none;
|
||
}
|
||
|
||
fieldset .has-group .btn{
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
/* -- 单行表单 */
|
||
form .inline label, fieldset.inline label{
|
||
display: inline-block;
|
||
vertical-align: bottom;
|
||
margin: 0 .75em .75em 0;
|
||
}
|
||
|
||
/* - 表格 */
|
||
.ks-table{
|
||
width: 100%;
|
||
overflow-x: auto;
|
||
overflow-y: hidden;
|
||
border-radius: 5px;
|
||
}
|
||
|
||
table{
|
||
border: 0;
|
||
width: 100%;
|
||
max-width: 100%;
|
||
caption-side: bottom;
|
||
border-collapse: collapse;
|
||
}
|
||
|
||
th:not([align]){
|
||
text-align: inherit;
|
||
text-align: -webkit-match-parent;
|
||
}
|
||
|
||
th, td{ padding: .75em }
|
||
|
||
table thead tr{
|
||
border-bottom: 2px solid #ccc;
|
||
border-bottom-color: var(--gray);
|
||
}
|
||
table tbody tr{
|
||
border-bottom: 1px solid #ddd;
|
||
border-bottom-color: var(--light-gray);
|
||
transition: border-color .3s, background .3s;
|
||
}
|
||
table tbody tr:last-child{ border-bottom: 0 }
|
||
|
||
table tbody tr:hover{
|
||
background-color: #eee;
|
||
background-color: var(--lighter-gray);
|
||
}
|
||
|
||
/* - 蓝色风格 */
|
||
table.fill{
|
||
border-left: 1px solid transparent;
|
||
border-right: 1px solid transparent;
|
||
}
|
||
|
||
table.fill thead{
|
||
background-color: #3498db;
|
||
background-color: var(--primary);
|
||
border: 1px solid #3498db;
|
||
border-color: var(--primary);
|
||
border-bottom: none;
|
||
}
|
||
table.fill thead tr{
|
||
border-bottom: none;
|
||
}
|
||
table.fill thead th, table.fill thead td{
|
||
color: #fff;
|
||
}
|
||
|
||
table.fill tbody{
|
||
border-left: 1px solid #ddd;
|
||
border-right: 1px solid #ddd;
|
||
border-bottom: 1px solid #ddd;
|
||
}
|
||
table.fill tbody tr:nth-child(even) th, table.fill tbody tr:nth-child(even){
|
||
background: #f7f7f7;
|
||
}
|
||
|
||
/* - 嵌入式网页 */
|
||
iframe{
|
||
border: none;
|
||
}
|
||
|
||
/* - 栅格系统 */
|
||
.row{
|
||
row-gap: 2em;
|
||
display: flex;
|
||
margin: 0 -1em;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.row.s{
|
||
row-gap: 1em;
|
||
margin: 0 -.5em;
|
||
}
|
||
.row.m{
|
||
row-gap: 2.5em;
|
||
margin: 0 -1.25em;
|
||
}
|
||
.row.l{
|
||
row-gap: 3em;
|
||
margin: 0 -1.5em;
|
||
}
|
||
|
||
.row.full{
|
||
row-gap: 0;
|
||
margin: 0;
|
||
}
|
||
|
||
/* -- 对齐方式 */
|
||
.row.right{ justify-content: flex-end; }
|
||
.row.center{ justify-content: center; }
|
||
.row.around{ justify-content: space-around; }
|
||
.row.between{ justify-content: space-between; }
|
||
|
||
/* -- 网格间距 */
|
||
.row > [class*="col-"]{
|
||
flex: 0 0 100%;
|
||
padding: 0 1em;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.row.s > [class*="col-"]{
|
||
padding: 0 .5em;
|
||
}
|
||
.row.m > [class*="col-"]{
|
||
padding: 0 1.25em;
|
||
}
|
||
.row.l > [class*="col-"]{
|
||
padding: 0 1.5em;
|
||
}
|
||
.row.full > [class*="col-"]{
|
||
padding: 0;
|
||
}
|
||
|
||
/* -- 自适应间距栅格 */
|
||
@media screen and (max-width: 600px){
|
||
.row.auto{
|
||
row-gap: 1em;
|
||
margin: 0 -.5em;
|
||
}
|
||
|
||
.row.auto > [class*="col-"]{
|
||
padding: 0 .5em;
|
||
}
|
||
}
|
||
|
||
@media screen and (min-width: 1920px){
|
||
.row.auto{
|
||
row-gap: 2.5em;
|
||
margin: 0 -1.25em;
|
||
}
|
||
|
||
.row.auto > [class*="col-"]{
|
||
padding: 0 1.25em;
|
||
}
|
||
}
|
||
|
||
/* -- 栅格主体 */
|
||
.row .col-auto{
|
||
flex: 1 1 auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.row .col-1{
|
||
flex: 0 0 8.3333%;
|
||
max-width: 8.3333%;
|
||
}
|
||
|
||
.row .col-2{
|
||
flex: 0 0 16.6666%;
|
||
max-width: 16.6666%;
|
||
}
|
||
|
||
.row .col-3{
|
||
flex: 0 0 25%;
|
||
max-width: 25%;
|
||
}
|
||
|
||
.row .col-4{
|
||
flex: 0 0 33.3333%;
|
||
max-width: 33.3333%;
|
||
}
|
||
|
||
.row .col-5{
|
||
flex: 0 0 41.6666%;
|
||
max-width: 41.6666%;
|
||
}
|
||
|
||
.row .col-6{
|
||
flex: 0 0 50%;
|
||
max-width: 50%;
|
||
}
|
||
|
||
.row .col-7{
|
||
flex: 0 0 58.3333%;
|
||
max-width: 58.3333%;
|
||
}
|
||
|
||
.row .col-8{
|
||
flex: 0 0 66.6666%;
|
||
max-width: 66.6666%;
|
||
}
|
||
|
||
.row .col-9{
|
||
flex: 0 0 75%;
|
||
max-width: 75%;
|
||
}
|
||
|
||
.row .col-10{
|
||
flex: 0 0 83.3333%;
|
||
max-width: 83.3333%;
|
||
}
|
||
|
||
.row .col-11{
|
||
flex: 0 0 91.6666%;
|
||
max-width: 91.6666%;
|
||
}
|
||
|
||
.row .col-12{
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
}
|
||
|
||
/* --- 手机 */
|
||
@media screen and (min-width: 600px){
|
||
.row .col-s-auto{
|
||
flex: 1 1 auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.row .col-s-1{
|
||
flex: 0 0 8.3333%;
|
||
max-width: 8.3333%;
|
||
}
|
||
|
||
.row .col-s-2{
|
||
flex: 0 0 16.6666%;
|
||
max-width: 16.6666%;
|
||
}
|
||
|
||
.row .col-s-3{
|
||
flex: 0 0 25%;
|
||
max-width: 25%;
|
||
}
|
||
|
||
.row .col-s-4{
|
||
flex: 0 0 33.3333%;
|
||
max-width: 33.3333%;
|
||
}
|
||
|
||
.row .col-s-5{
|
||
flex: 0 0 41.6666%;
|
||
max-width: 41.6666%;
|
||
}
|
||
|
||
.row .col-s-6{
|
||
flex: 0 0 50%;
|
||
max-width: 50%;
|
||
}
|
||
|
||
.row .col-s-7{
|
||
flex: 0 0 58.3333%;
|
||
max-width: 58.3333%;
|
||
}
|
||
|
||
.row .col-s-8{
|
||
flex: 0 0 66.6666%;
|
||
max-width: 66.6666%;
|
||
}
|
||
|
||
.row .col-s-9{
|
||
flex: 0 0 75%;
|
||
max-width: 75%;
|
||
}
|
||
|
||
.row .col-s-10{
|
||
flex: 0 0 83.3333%;
|
||
max-width: 83.3333%;
|
||
}
|
||
|
||
.row .col-s-11{
|
||
flex: 0 0 91.6666%;
|
||
max-width: 91.6666%;
|
||
}
|
||
|
||
.row .col-s-12{
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* --- 平板 */
|
||
@media screen and (min-width: 900px){
|
||
.row .col-m-auto{
|
||
flex: 1 1 auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.row .col-m-1{
|
||
flex: 0 0 8.3333%;
|
||
max-width: 8.3333%;
|
||
}
|
||
|
||
.row .col-m-2{
|
||
flex: 0 0 16.6666%;
|
||
max-width: 16.6666%;
|
||
}
|
||
|
||
.row .col-m-3{
|
||
flex: 0 0 25%;
|
||
max-width: 25%;
|
||
}
|
||
|
||
.row .col-m-4{
|
||
flex: 0 0 33.3333%;
|
||
max-width: 33.3333%;
|
||
}
|
||
|
||
.row .col-m-5{
|
||
flex: 0 0 41.6666%;
|
||
max-width: 41.6666%;
|
||
}
|
||
|
||
.row .col-m-6{
|
||
flex: 0 0 50%;
|
||
max-width: 50%;
|
||
}
|
||
|
||
.row .col-m-7{
|
||
flex: 0 0 58.3333%;
|
||
max-width: 58.3333%;
|
||
}
|
||
|
||
.row .col-m-8{
|
||
flex: 0 0 66.6666%;
|
||
max-width: 66.6666%;
|
||
}
|
||
|
||
.row .col-m-9{
|
||
flex: 0 0 75%;
|
||
max-width: 75%;
|
||
}
|
||
|
||
.row .col-m-10{
|
||
flex: 0 0 83.3333%;
|
||
max-width: 83.3333%;
|
||
}
|
||
|
||
.row .col-m-11{
|
||
flex: 0 0 91.6666%;
|
||
max-width: 91.6666%;
|
||
}
|
||
|
||
.row .col-m-12{
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* --- 电脑 */
|
||
@media screen and (min-width: 1024px){
|
||
.row .col-l-auto{
|
||
flex: 1 1 auto;
|
||
max-width: 100%;
|
||
}
|
||
|
||
.row .col-l-1{
|
||
flex: 0 0 8.3333%;
|
||
max-width: 8.3333%;
|
||
}
|
||
|
||
.row .col-l-2{
|
||
flex: 0 0 16.6666%;
|
||
max-width: 16.6666%;
|
||
}
|
||
|
||
.row .col-l-3{
|
||
flex: 0 0 25%;
|
||
max-width: 25%;
|
||
}
|
||
|
||
.row .col-l-4{
|
||
flex: 0 0 33.3333%;
|
||
max-width: 33.3333%;
|
||
}
|
||
|
||
.row .col-l-5{
|
||
flex: 0 0 41.6666%;
|
||
max-width: 41.6666%;
|
||
}
|
||
|
||
.row .col-l-6{
|
||
flex: 0 0 50%;
|
||
max-width: 50%;
|
||
}
|
||
|
||
.row .col-l-7{
|
||
flex: 0 0 58.3333%;
|
||
max-width: 58.3333%;
|
||
}
|
||
|
||
.row .col-l-8{
|
||
flex: 0 0 66.6666%;
|
||
max-width: 66.6666%;
|
||
}
|
||
|
||
.row .col-l-9{
|
||
flex: 0 0 75%;
|
||
max-width: 75%;
|
||
}
|
||
|
||
.row .col-l-10{
|
||
flex: 0 0 83.3333%;
|
||
max-width: 83.3333%;
|
||
}
|
||
|
||
.row .col-l-11{
|
||
flex: 0 0 91.6666%;
|
||
max-width: 91.6666%;
|
||
}
|
||
|
||
.row .col-l-12{
|
||
flex: 0 0 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
/* -- 网格对齐方式 */
|
||
.row > .left, .row > .right, .row > .top, .row > .bottom, .row > .center{
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.row > .center{
|
||
align-items: center;
|
||
justify-content: center;
|
||
}
|
||
|
||
.row > .center-fixed{
|
||
text-align: center;
|
||
}
|
||
|
||
.row > .left{
|
||
-webkit-box-align: start;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.row > .right{
|
||
-webkit-box-align: end;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.row > .top{
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.row > .bottom{
|
||
justify-content: flex-end;
|
||
}
|
||
|
||
@media screen and (max-width: 900px){
|
||
.row > .to-center{
|
||
align-items: center !important;
|
||
}
|
||
}
|
||
|
||
/* - 隐藏栅格功能 */
|
||
@media screen and (max-width: 600px){
|
||
.row > .hide-s{ display: none; }
|
||
}
|
||
|
||
@media screen and (max-width: 900px){
|
||
.row > .hide-m{ display: none; }
|
||
}
|
||
|
||
@media screen and (max-width: 1024px){
|
||
.row > .hide-l{ display: none; }
|
||
}
|
||
|
||
/* 4 - 动画
|
||
-------------------------------- */
|
||
|
||
/* - 淡入淡出 */
|
||
@keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
|
||
@-webkit-keyframes fade-in{ from{ opacity: 0 } to{ opacity: 1 } }
|
||
|
||
@keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }
|
||
@-webkit-keyframes fade-off{ from{ opacity: 1 } to{ opacity: 0 } }
|
||
|
||
@keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }
|
||
@-webkit-keyframes fade-in-top{ from{ opacity: 0; transform: translateY(20px) } to{ opacity: 1; transform: translateY(0) } }
|
||
|
||
@keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }
|
||
@-webkit-keyframes fade-in-bottom{ from{ opacity: 0; transform: translateY(-20px) } to{ opacity: 1; transform: translateY(0) } }
|
||
|
||
@keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }
|
||
@-webkit-keyframes fade-in-left{ from{ opacity: 0; transform: translateX(20px) } to{ opacity: 1; transform: translateX(0) } }
|
||
|
||
@keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
|
||
@-webkit-keyframes fade-in-right{ from{ opacity: 0; transform: translateX(-20px) } to{ opacity: 1; transform: translateX(0) } }
|
||
|
||
/* - 淡入缩放 */
|
||
@keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }
|
||
@-webkit-keyframes fade-small-large{ from{ opacity: 0; transform: scale(.5, .5) } to{ opacity: 1; transform: scale(1, 1) } }
|
||
|
||
@keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }
|
||
@-webkit-keyframes fade-large-small{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(.5, .5) } }
|
||
|
||
@keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }
|
||
@-webkit-keyframes fade-larger-small{ from{ opacity: 0; transform: scale(1.5, 1.5) } to{ opacity: 1; transform: scale(1, 1) } }
|
||
|
||
@keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }
|
||
@-webkit-keyframes fade-small-larger{ from{ opacity: 1; transform: scale(1, 1) } to{ opacity: 0; transform: scale(1.5, 1.5) } }
|
||
|
||
@keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }
|
||
@-webkit-keyframes scale-small-large{ from{ transform: scale(0, 0) } to{ transform: scale(1, 1) } }
|
||
|
||
@keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
|
||
@-webkit-keyframes scale-large-small{ from{ transform: scale(1, 1) } to{ transform: scale(0, 0) } }
|
||
|
||
/* - 平移 */
|
||
@keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }
|
||
@-webkit-keyframes up-and-down{ from{ transform: translateY(-20px) } to{ transform: translateY(20px) } }
|
||
|
||
@keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
|
||
@-webkit-keyframes left-and-right{ from{ transform: translateX(-20px) } to{ transform: translateX(20px) } }
|
||
|
||
/* - 旋转 */
|
||
@keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
|
||
@-webkit-keyframes rotate{ from{ transform: rotate(0deg) } to{ transform: rotate(360deg) } }
|
||
|
||
/* - 弹跳 */
|
||
@keyframes jump{
|
||
0% {
|
||
transform: translateY(0) scale(1.15,.8)
|
||
}
|
||
|
||
20% {
|
||
transform: translateY(-35px) scaleY(1.1)
|
||
}
|
||
|
||
50% {
|
||
transform: translateY(-50px) scale(1)
|
||
}
|
||
|
||
80% {
|
||
transform: translateY(-35px) scale(1)
|
||
}
|
||
|
||
to {
|
||
transform: translateY(0) scale(1.15,.8)
|
||
}
|
||
}
|
||
|
||
/* 5 - 组件
|
||
-------------------------------- */
|
||
|
||
/* - 漂浮提示 */
|
||
[ks-tag]{ position: relative }
|
||
[ks-tag]:before, [ks-tag]:after{
|
||
position: absolute;
|
||
pointer-events: none;
|
||
}
|
||
|
||
/* -- 小箭头 */
|
||
[ks-tag]:before{
|
||
width: 0;
|
||
height: 0;
|
||
opacity: 0;
|
||
content: '';
|
||
position: absolute;
|
||
transition: opacity .3s;
|
||
border: .5rem solid transparent;
|
||
}
|
||
|
||
[ks-tag~=top]:before{
|
||
bottom: 100%;
|
||
border-top-color: rgba(0, 0, 0, .7);
|
||
}
|
||
[ks-tag~=bottom]:before{
|
||
top: 100%;
|
||
border-bottom-color: rgba(0, 0, 0, .7);
|
||
}
|
||
|
||
[ks-tag~=top]:before, [ks-tag~=bottom]:before{
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
[ks-tag=left]:before{
|
||
right: 100%;
|
||
border-left-color: rgba(0, 0, 0, .7);
|
||
}
|
||
[ks-tag=right]:before{
|
||
left: 100%;
|
||
border-right-color: rgba(0, 0, 0, .7);
|
||
}
|
||
|
||
[ks-tag=left]:before, [ks-tag=right]:before{
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* -- 文字 */
|
||
[ks-tag~=top]:after{
|
||
bottom: 100%;
|
||
margin-bottom: 1rem;
|
||
}
|
||
[ks-tag~=bottom]:after{
|
||
top: 100%;
|
||
margin-top: 1rem;
|
||
}
|
||
|
||
[ks-tag=top]:after, [ks-tag=bottom]:after{
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
[ks-tag=left]:after{
|
||
right: 100%;
|
||
margin-right: 1rem;
|
||
}
|
||
[ks-tag=right]:after{
|
||
left: 100%;
|
||
margin-left: 1rem;
|
||
}
|
||
|
||
[ks-tag=left]:after, [ks-tag=right]:after{
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* -- 组合对齐方式 */
|
||
[ks-tag~=left][ks-tag~=top]:after, [ks-tag~=left][ks-tag~=bottom]:after{
|
||
right: 0;
|
||
min-width: 4em;
|
||
}
|
||
[ks-tag~=right][ks-tag~=top]:after, [ks-tag~=right][ks-tag~=bottom]:after{
|
||
left: 0;
|
||
min-width: 4em;
|
||
}
|
||
|
||
[ks-text]:hover:before, [ks-text]:hover:after{ opacity: 1 }
|
||
|
||
[ks-text]:after{
|
||
opacity: 0;
|
||
z-index: 1;
|
||
color: #fff;
|
||
font-size: .85rem;
|
||
white-space: nowrap;
|
||
border-radius: .5rem;
|
||
padding: .25rem .5rem;
|
||
content: attr(ks-text);
|
||
transition: opacity .3s;
|
||
background: rgba(0, 0, 0, .7);
|
||
}
|
||
|
||
/* - 弹窗 */
|
||
notice{
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
z-index: 10;
|
||
padding: 1em;
|
||
position: fixed;
|
||
user-select: none;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.ks-notice{
|
||
color: #fff;
|
||
display: table;
|
||
background: #333;
|
||
border-radius: 3em;
|
||
pointer-events: auto;
|
||
margin: 0 auto 1em auto;
|
||
box-shadow: 0 5px 5px -2px rgba(0, 0, 0, .2);
|
||
animation: fade-small-large .3s both;
|
||
-webkit-animation: fade-small-large .3s both;
|
||
}
|
||
|
||
.ks-notice.remove{
|
||
animation: fade-in-top .3s both reverse;
|
||
-webkit-animation: fade-in-top .3s both reverse;
|
||
}
|
||
|
||
/* -- 弹窗颜色 */
|
||
.ks-notice.red{
|
||
background: #ea644a;
|
||
background: var(--red);
|
||
}
|
||
|
||
.ks-notice.yellow{
|
||
background: #ffb03a;
|
||
background: var(--yellow);
|
||
}
|
||
|
||
.ks-notice.blue{
|
||
background: #3498db;
|
||
background: var(--blue);
|
||
}
|
||
|
||
.ks-notice.green{
|
||
background: #27a17e;
|
||
background: var(--green);
|
||
}
|
||
|
||
.ks-notice > span{
|
||
padding: .5em 1em;
|
||
display: table-cell;
|
||
vertical-align: middle;
|
||
}
|
||
|
||
.ks-notice .close{
|
||
cursor: pointer;
|
||
border-radius: 0 1em 1em 0;
|
||
transition: background .3s;
|
||
}
|
||
|
||
.ks-notice .close:hover{
|
||
background: rgba(0, 0, 0, .1);
|
||
}
|
||
|
||
.ks-notice .close:after{
|
||
content: '×';
|
||
font: inherit;
|
||
}
|
||
|
||
/* - 图片放大 */
|
||
[ks-image=active]{
|
||
cursor: pointer;
|
||
cursor: zoom-in;
|
||
}
|
||
|
||
.ks-image{
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
z-index: 66;
|
||
position: fixed;
|
||
user-select: none;
|
||
animation: fade-in .3s both;
|
||
-webkit-animation: fade-in .3s both;
|
||
}
|
||
.ks-image.loading{ cursor: wait }
|
||
.ks-image.remove:before{
|
||
animation: fade-off .3s both;
|
||
-webkit-animation: fade-off .3s both;
|
||
}
|
||
|
||
.ks-image:before{
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
content: '';
|
||
position: absolute;
|
||
background: rgba(0, 0, 0, .6);
|
||
}
|
||
|
||
.ks-image .ks-prev, .ks-image .ks-next{
|
||
top: 0;
|
||
bottom: 0;
|
||
width: 10%;
|
||
height: 5em;
|
||
margin: auto;
|
||
max-width: 5em;
|
||
cursor: pointer;
|
||
position: absolute;
|
||
transition: opacity .3s, transform .3s;
|
||
}
|
||
.ks-image .ks-prev:hover{ transform: translateX(-.5em) }
|
||
.ks-image .ks-next:hover{ transform: translateX(.5em) }
|
||
|
||
.ks-image .ks-prev{
|
||
left: 0;
|
||
background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMTAyNCAxMDI0IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgZmlsbD0icmdiYSgyNTUsMjU1LDI1NSwwLjkpIj48cGF0aCBkPSJNMzI0LjIxMTUxNyA1MTEuODA1NjMxIDc4Ny44ODk1OTQgNzMuMDgyNTgzYzE2LjE5NDIyLTE2LjYzMDM2NSAxNi4xOTQyMi00My45NzQ3MDQgMC02MC42MDUwNjgtMTYuMTk0MjItMTYuNjMwMzY1LTQyLjQ5NTYwNy0xNi42MzAzNjUtNTguNjEzOTc2IDBMMjM1Ljc1MDExMyA0NzkuMzYwMzAyYy04LjY0NzAzMSA4Ljk2OTM5OC0xMi4zNDQ3NzUgMjAuOTM0OTE3LTExLjcxOTAwMyAzMi40NDUzMjktMC42NDQ3MzUgMTEuOTA4NjMgMy4wNzE5NzIgMjMuODc0MTQ5IDExLjcxOTAwMyAzMi44MjQ1ODVsNDkzLjUwNjU0MiA0NjYuODgyNzg4YzE2LjExODM2OSAxNi42NDkzMjcgNDIuNDM4NzE4IDE2LjY0OTMyNyA1OC42MTM5NzYgMCAxNi4xOTQyMi0xNy4wODU0NzEgMTYuMTk0MjItNDMuOTc0NzA0IDAtNjAuNjA1MDY4TDMyNC4yMTE1MTcgNTExLjgwNTYzMSI+PC9wYXRoPjwvc3ZnPg==);
|
||
}
|
||
.ks-image .ks-next{
|
||
right: 0;
|
||
background: center/60% no-repeat url(data:image/svg+xml;base64,PHN2ZyB2aWV3Qm94PSIwIDAgMjAwIDIwMCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9InJnYmEoMjU1LDI1NSwyNTUsMC45KSI+PHBhdGggZD0iTTEzNi43LDEwMGwtOTAuNiw4NS44Yy0zLjIsMy4yLTMuMiw4LjUsMCwxMS44YzMuMiwzLjMsOC4zLDMuMywxMS40LDBsOTYuNC05MS4yYzEuNy0xLjcsMi40LTQuMSwyLjMtNi40YzAuMS0yLjItMC42LTQuNi0yLjMtNi4zTDU3LjYsMi40Yy0zLjEtMy4yLTguMy0zLjItMTEuNCwwcy0zLjIsOC42LDAsMTEuOEwxMzYuNywxMDAiLz48L3N2Zz4NCg==);
|
||
}
|
||
|
||
.ks-image .ended{
|
||
opacity: .5;
|
||
cursor: no-drop;
|
||
}
|
||
|
||
.ks-image .ks-ball{
|
||
top: 1em;
|
||
right: 1em;
|
||
width: 2em;
|
||
height: 2em;
|
||
opacity: 0;
|
||
border-radius: 66%;
|
||
position: absolute;
|
||
pointer-events: none;
|
||
transition: opacity .3s;
|
||
border: .5em #fff solid;
|
||
border-left-color: #3498db;
|
||
border-left-color: var(--primary);
|
||
animation: rotate .5s linear infinite paused;
|
||
-webkit-animation: rotate .5s linear infinite paused;
|
||
}
|
||
.ks-image.loading .ks-ball{
|
||
opacity: 1;
|
||
animation-play-state: running;
|
||
}
|
||
|
||
.ks-image img{
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
margin: auto;
|
||
max-width: 80%;
|
||
max-height: 90%;
|
||
cursor: zoom-out;
|
||
position: absolute;
|
||
transition: transform .3s;
|
||
animation: fade-small-large .3s backwards;
|
||
-webkit-animation: fade-small-large .3s backwards;
|
||
}
|
||
.ks-image.remove img, .ks-image.remove .ks-prev, .ks-image.remove .ks-next{
|
||
animation: fade-large-small .3s both;
|
||
-webkit-animation: fade-large-small .3s both;
|
||
}
|
||
|
||
.ks-image img[src$=".jpg"]{ box-shadow: 0 5px 15px rgba(0, 0, 0, .5) }
|
||
|
||
/* ----
|
||
|
||
Copyright (C) 2021 Dreamer-Paul.
|
||
|
||
---- */
|