mirror of https://github.com/IoTcat/ushio-img.git
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
1475 lines
32 KiB
1475 lines
32 KiB
@charset "UTF-8"; |
|
|
|
/* ---- |
|
|
|
# Kico Style 2.2 |
|
# By: Dreamer-Paul |
|
# Last Update: 2019.3.2 |
|
|
|
一个简洁、有趣的开源响应式框架,仅包含基础样式,需按照一定规则进行二次开发。 |
|
|
|
欢迎你加入缤奇,和我们一起改变世界。 |
|
本代码为奇趣保罗原创,并遵守 MIT 开源协议。欢迎访问我的博客:https://paugram.com |
|
|
|
---- */ |
|
|
|
/* 0 - 全局 |
|
-------------------------------- */ |
|
html, body, |
|
dl, dt, dd, ol, ul, |
|
h1, h2, h3, h4, h5, h6, |
|
pre, code, form, p, |
|
fieldset, legend, figure{ |
|
margin: 0; |
|
padding: 0; |
|
} |
|
|
|
html{ |
|
color: #353535; |
|
font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif; |
|
} |
|
|
|
html.font-s{ font-size: 14px } |
|
html.font-m{ font-size: 16px } |
|
html.font-l{ font-size: 18px } |
|
|
|
@media screen and (max-width: 500px){ |
|
html.font-auto{ font-size: 14px } |
|
} |
|
|
|
@media screen and (min-width: 1930px){ |
|
html.font-auto{ font-size: 18px } |
|
} |
|
|
|
*, *:before, *:after{ box-sizing: border-box } |
|
|
|
/* - 部分老式浏览器的更正 */ |
|
aside, article, section, figure, figcaption, header, main, footer, nav{ display: block } |
|
|
|
/* - 选择内容 */ |
|
::-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; |
|
border-radius: 5px; |
|
} |
|
|
|
::-webkit-scrollbar-track:hover{ |
|
border-radius: 5px; |
|
background: rgba(0, 0, 0, .05); |
|
} |
|
|
|
body::-webkit-scrollbar-thumb{ |
|
box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1), inset 0 -1px 0 rgba(0, 0, 0, .07); |
|
} |
|
|
|
body::-webkit-scrollbar-track:hover{ |
|
border-radius: 0; |
|
box-shadow: inset 1px 0 0 rgba(0, 0, 0, .1); |
|
} |
|
|
|
.ks-scroll-hover::-webkit-scrollbar{ |
|
display: none; |
|
} |
|
|
|
.ks-scroll-hover:hover::-webkit-scrollbar{ |
|
display: inherit; |
|
} |
|
|
|
/* 1 - 容器 |
|
-------------------------------- */ |
|
.wrap{ |
|
margin-left: auto; |
|
margin-right: auto; |
|
max-width: 1200px; |
|
padding: 0 1.25em; |
|
box-sizing: content-box; |
|
} |
|
|
|
.wrap.min{ max-width: 800px } |
|
.wrap.mid{ max-width: 1000px } |
|
.wrap.max{ max-width: 1400px } |
|
.wrap.full{ max-width: 100% } |
|
|
|
.wrap.thin{ padding: 0 .75em } |
|
.wrap.thick{ padding: 0 1.5em } |
|
.wrap.clear{ |
|
padding-left: 0; |
|
padding-right: 0; |
|
} |
|
|
|
.clearfix:after{ |
|
content: ''; |
|
clear: both; |
|
display: block; |
|
} |
|
|
|
/* 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; |
|
text-decoration: none; |
|
} |
|
|
|
a:hover{ |
|
color: #ffc670; |
|
} |
|
|
|
abbr[title]{ |
|
cursor: help; |
|
text-decoration: none; |
|
border-bottom: 1px dotted; |
|
} |
|
|
|
em, mark, kbd{ |
|
padding: 0 .5em; |
|
border-radius: .5em; |
|
display: inline-block; |
|
} |
|
|
|
em{ |
|
color: #fff; |
|
font-style: normal; |
|
background: #3498db; |
|
} |
|
|
|
kbd{ |
|
color: #fff; |
|
font-size: 90%; |
|
background: #333; |
|
font-family: 'Consolas', 'Courier New', monospace, "微软雅黑"; |
|
} |
|
|
|
img, svg, audio, video{ |
|
max-width: 100%; |
|
vertical-align: middle; |
|
} |
|
|
|
/* - 文章 */ |
|
article{ 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 } |
|
|
|
/* - 按钮 */ |
|
.btn{ |
|
outline: 0; |
|
font: inherit; |
|
color: inherit; |
|
cursor: pointer; |
|
background: #fff; |
|
user-select: none; |
|
border-radius: 4px; |
|
padding: .5em 1em; |
|
display: inline-block; |
|
border: 1px solid transparent; |
|
} |
|
.btn:hover{ color: inherit } |
|
|
|
/* -- 禁用的按钮 */ |
|
.btn[disabled]{ |
|
opacity: .5; |
|
cursor: not-allowed; |
|
} |
|
|
|
/* -- 有图标的按钮 */ |
|
.btn i{ margin-right: 5px } |
|
.btn i:last-child{ margin-right: 0 } |
|
|
|
/* -- 按钮尺寸 */ |
|
.btn.small{ |
|
padding: .25em .5em; |
|
} |
|
|
|
.btn.middle{ |
|
padding: .75em 1.5em; |
|
} |
|
|
|
.btn.large{ |
|
font-size: 1.2em; |
|
padding: 1em 2em; |
|
} |
|
|
|
/* -- 按钮颜色 */ |
|
.btn.red, .btn.yellow, .btn.blue, .btn.green{ color: #fff } |
|
|
|
.btn.red{ background: #c40b00 } |
|
.btn.yellow{ background: #ffb03a } |
|
.btn.blue{ background: #3498db } |
|
.btn.green{ background: #27a17e } |
|
.btn.transparent{ background: transparent } |
|
|
|
/* - 代码 */ |
|
pre, code{ |
|
font-size: 1em; |
|
font-family: 'Consolas', 'Courier New', monospace, "微软雅黑"; |
|
} |
|
|
|
pre{ word-wrap: normal } |
|
|
|
code{ |
|
color: #c40b00; |
|
font-size: 90%; |
|
word-wrap: normal; |
|
border-radius: 4px; |
|
padding: .25em .5em; |
|
word-break: break-all; |
|
background-color: #f7f2f4; |
|
} |
|
|
|
pre > code{ |
|
color: #fff; |
|
padding: 1em; |
|
display: block; |
|
overflow-x: auto; |
|
word-break: normal; |
|
font-size: inherit; |
|
border-radius: 5px; |
|
background-color: #333; |
|
} |
|
|
|
/* - 项目列表 */ |
|
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 0.3s, background 0.3s; |
|
-o-transition: color 0.3s, background 0.3s; |
|
-moz-transition: color 0.3s, background 0.3s; |
|
-webkit-transition: color 0.3s, background 0.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; |
|
font-style: normal; |
|
} |
|
|
|
/* - 分割线 */ |
|
hr{ |
|
border: 0; |
|
margin: 1.5em 0; |
|
border-top: 1px rgba(0, 0, 0, 0.5) solid; |
|
} |
|
hr.light{ |
|
border-top: 1px rgba(255, 255, 255, 0.5) solid; |
|
} |
|
|
|
/* - 表单 */ |
|
input[disabled], textarea[disabled]{ |
|
cursor: no-drop !important; |
|
} |
|
|
|
input[disabled], textarea[disabled], input[readonly]{ |
|
background: rgb(235, 235, 228); |
|
} |
|
|
|
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: 4px; |
|
border: #ccc 1px solid; |
|
} |
|
|
|
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; |
|
display: block; |
|
padding: .5em 1em; |
|
background: #3498db; |
|
border-radius: .5em; |
|
} |
|
|
|
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; |
|
background-color: #3498db; |
|
} |
|
|
|
input[type="range"]:active::-moz-range-thumb { |
|
border-color: #3498db; |
|
background-color: #3498db; |
|
} |
|
|
|
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 { |
|
background: #3498db; |
|
content: ''; |
|
height: 2px; |
|
pointer-events: none; |
|
} |
|
|
|
input[type="range"]::-webkit-slider-thumb { |
|
width: 14px; |
|
height: 14px; |
|
-webkit-appearance: none; |
|
appearance: none; |
|
background: #fff; |
|
border-radius: 50px; |
|
margin-top: -6px; |
|
border: 1px solid rgba(0, 0, 0, 0.15); |
|
transition: .3s border-color, .3s background-color; |
|
} |
|
|
|
input[type="range"]::-moz-range-track { |
|
width: 240px; |
|
height: 2px; |
|
background: rgba(0, 50, 126, 0.12); |
|
} |
|
|
|
input[type="range"]::-moz-range-thumb { |
|
width: 14px; |
|
height: 14px; |
|
background: #fff; |
|
border-radius: 50px; |
|
border: 1px solid rgba(0, 30, 75, 0.12); |
|
position: relative; |
|
transition: .3s border-color, .3s background-color; |
|
} |
|
|
|
input[type="range"]::-moz-range-progress { |
|
height: 2px; |
|
background: #467fcf; |
|
border: 0; |
|
margin-top: 0; |
|
} |
|
|
|
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; |
|
transition: background 0.3s, box-shadow 0.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: #3498db; |
|
border: 2px solid #3498db; |
|
box-shadow: 0 0 0 .2em #fff inset; |
|
} |
|
|
|
input[type="checkbox"]:checked:before{ |
|
box-shadow: none; |
|
background: #3498db; |
|
} |
|
|
|
input[type="checkbox"]:checked:after{ |
|
transform: rotate(45deg) scale(1); |
|
} |
|
|
|
/* -- 开关按钮 */ |
|
input.switch{ |
|
width: 4em; |
|
height: 2em; |
|
float: none; |
|
cursor: pointer; |
|
background: #eee; |
|
position: relative; |
|
border-radius: 50px; |
|
border: 1px solid #ddd; |
|
box-sizing: content-box; |
|
transition: border .3s, background .3s; |
|
} |
|
|
|
input.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 0.3s; |
|
} |
|
|
|
input.switch:after{ |
|
content: normal; |
|
} |
|
|
|
input.switch:checked{ |
|
box-shadow: none; |
|
background: #3498db; |
|
border-color: #3498db; |
|
} |
|
|
|
input.switch:checked:before{ |
|
background: #fff; |
|
transform: translateX(2em); |
|
} |
|
|
|
/* - 表单小组 */ |
|
fieldset{ |
|
border: none; |
|
margin-bottom: 2em; |
|
} |
|
|
|
fieldset > *{ margin-bottom: 1em } |
|
fieldset:last-child, fieldset > *:last-child{ margin-bottom: 0 } |
|
|
|
fieldset input, fieldset select, fieldset textarea{ width: 100% } |
|
|
|
/* -- 控件描述 */ |
|
fieldset label{ |
|
display: block; |
|
user-select: none; |
|
margin-bottom: 1em; |
|
} |
|
fieldset label:last-child{ margin-bottom: 0 } |
|
|
|
/* -- 含按钮描述块 */ |
|
fieldset label.submit{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
} |
|
|
|
fieldset label.submit span{ flex: 0 0 100% } |
|
fieldset label.submit input{ |
|
width: auto; |
|
flex: 1 1 auto; |
|
border-top-right-radius: 0; |
|
border-bottom-right-radius: 0; |
|
} |
|
fieldset label.submit button{ |
|
vertical-align: middle; |
|
border-top-left-radius: 0; |
|
border-bottom-left-radius: 0; |
|
} |
|
|
|
fieldset legend{ margin: 0 0 1em } |
|
fieldset select{ width: 100% } |
|
fieldset label span:first-child{ |
|
font-size: .85em; |
|
margin-bottom: .5rem; |
|
display: inline-block; |
|
color: rgba(0, 0, 0, .6); |
|
} |
|
|
|
fieldset label.required span:after{ |
|
color: red; |
|
content: "*"; |
|
margin-left: .25em; |
|
} |
|
|
|
/* -- 单行表单 */ |
|
form.inline fieldset label, fieldset.inline label{ |
|
float: left; |
|
display: block; |
|
margin: 0 1em .5em 0; |
|
} |
|
|
|
form fieldset.inline:after{ |
|
content: ''; |
|
clear: both; |
|
display: block; |
|
} |
|
|
|
/* - 表格*/ |
|
.ks-table{ |
|
width: 100%; |
|
overflow-x: auto; |
|
overflow-y: hidden; |
|
border-radius: 5px; |
|
} |
|
|
|
table{ |
|
border: 0; |
|
width: 100%; |
|
max-width: 100%; |
|
border-collapse: collapse; |
|
} |
|
|
|
table th, table td{ |
|
padding: .75em; |
|
text-align: left; |
|
vertical-align: top; |
|
} |
|
|
|
table > thead > tr{ |
|
border-bottom: 2px solid #ccc; |
|
} |
|
|
|
table > tbody > tr > td{ |
|
border-bottom: 1px solid #ddd; |
|
} |
|
|
|
table > tbody > tr:last-child > td{ |
|
border-bottom: 0; |
|
} |
|
|
|
table > tbody > tr{ |
|
transition: background .3s; |
|
} |
|
|
|
table > tbody > tr:hover{ |
|
background: #eee; |
|
} |
|
|
|
table > thead > tr > th, table > tbody > tr > th, table > tfoot > tr > th, |
|
table > thead > tr > td, table > tbody > tr > td, table > tfoot > tr > td{ |
|
white-space: nowrap; |
|
} |
|
|
|
/* - 蓝色风格 */ |
|
table.fill{ |
|
border: 1px solid transparent; |
|
} |
|
|
|
table.fill > thead{ |
|
background: #3498db; |
|
border-left: 1px solid #3498db; |
|
border-right: 1px solid #3498db; |
|
} |
|
table.fill > thead > tr{ |
|
border-bottom: none; |
|
} |
|
table.fill > thead > tr > th, table.fill > thead > tr > td{ |
|
color: #fff; |
|
padding: 1em .75em; |
|
} |
|
|
|
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{ |
|
display: flex; |
|
flex-wrap: wrap; |
|
margin-left: -1.25em; |
|
margin-right: -1.25em; |
|
} |
|
|
|
.row.thin{ |
|
margin-left: -1em; |
|
margin-right: -1em; |
|
} |
|
|
|
.row.full{ |
|
margin-left: 0; |
|
margin-right: 0; |
|
} |
|
|
|
.row.scrollable{ |
|
overflow: auto; |
|
margin-left: 0; |
|
margin-right: 0; |
|
flex-wrap: nowrap; |
|
} |
|
|
|
/* -- 对齐方式 */ |
|
.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-"]{ |
|
position: relative; |
|
padding-left: 1.25em; |
|
padding-right: 1.25em; |
|
} |
|
|
|
.row.thin [class*="col-"]{ |
|
padding-left: 1em; |
|
padding-right: 1em; |
|
} |
|
|
|
.row.full [class*="col-"]{ |
|
padding: 0; |
|
margin-bottom: 0; |
|
} |
|
|
|
/* -- 网格主体 */ |
|
.row [class*="col-s-"], |
|
.row [class*="col-m-"], |
|
.row [class*="col-l-"]{ |
|
flex: 0 0 100%; |
|
max-width: 100%; |
|
margin-bottom: 2em; |
|
} |
|
|
|
.row [class*="col-s-"]:last-child, .row [class*="col-m-"]:last-child, .row [class*="col-l-"]:last-child{ |
|
margin-bottom: 0; |
|
} |
|
|
|
@media screen and (min-width: 600px){ |
|
.row [class*="col-s-"]{ |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
@media screen and (min-width: 900px){ |
|
.row [class*="col-m-"]{ |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1024px){ |
|
.row [class*="col-l-"]{ |
|
margin-bottom: 0; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 600px){ |
|
.row [class*="wrap-s"]{ |
|
margin-bottom: 1em; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 900px){ |
|
.row [class*="wrap-m"]{ |
|
margin-bottom: 1em; |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1024px){ |
|
.row [class*="wrap-l"]{ |
|
margin-bottom: 1em; |
|
} |
|
} |
|
|
|
@media screen and (min-width: 600px){ |
|
.col-s-left-1{ right: 8.3333%; } |
|
.col-s-left-2{ right: 16.6666%; } |
|
.col-s-left-3{ right: 25%; } |
|
.col-s-left-4{ right: 33.3333%; } |
|
.col-s-left-5{ right: 41.6666%; } |
|
.col-s-left-6{ right: 50%; } |
|
.col-s-left-7{ right: 58.3333%; } |
|
.col-s-left-8{ right: 66.6666%; } |
|
.col-s-left-9{ right: 75%; } |
|
.col-s-left-10{ right: 83.3333%; } |
|
.col-s-left-11{ right: 91.6666%; } |
|
.col-s-left-12{ right: 100%; } |
|
|
|
.col-s-right-1{ left: 8.3333%; } |
|
.col-s-right-2{ left: 16.6666%; } |
|
.col-s-right-3{ left: 25%; } |
|
.col-s-right-4{ left: 33.3333%; } |
|
.col-s-right-5{ left: 41.6666%; } |
|
.col-s-right-6{ left: 50%; } |
|
.col-s-right-7{ left: 58.3333%; } |
|
.col-s-right-8{ left: 66.6666%; } |
|
.col-s-right-9{ left: 75%; } |
|
.col-s-right-10{ left: 83.3333%; } |
|
.col-s-right-11{ left: 91.6666%; } |
|
.col-s-right-12{ left: 100%; } |
|
} |
|
|
|
@media screen and (min-width: 900px){ |
|
.col-m-left-1{ right: 8.3333%; } |
|
.col-m-left-2{ right: 16.6666%; } |
|
.col-m-left-3{ right: 25%; } |
|
.col-m-left-4{ right: 33.3333%; } |
|
.col-m-left-5{ right: 41.6666%; } |
|
.col-m-left-6{ right: 50%; } |
|
.col-m-left-7{ right: 58.3333%; } |
|
.col-m-left-8{ right: 66.6666%; } |
|
.col-m-left-9{ right: 75%; } |
|
.col-m-left-10{ right: 83.3333%; } |
|
.col-m-left-11{ right: 91.6666%; } |
|
.col-m-left-12{ right: 100%; } |
|
|
|
.col-m-right-1{ left: 8.3333%; } |
|
.col-m-right-2{ left: 16.6666%; } |
|
.col-m-right-3{ left: 25%; } |
|
.col-m-right-4{ left: 33.3333%; } |
|
.col-m-right-5{ left: 41.6666%; } |
|
.col-m-right-6{ left: 50%; } |
|
.col-m-right-7{ left: 58.3333%; } |
|
.col-m-right-8{ left: 66.6666%; } |
|
.col-m-right-9{ left: 75%; } |
|
.col-m-right-10{ left: 83.3333%; } |
|
.col-m-right-11{ left: 91.6666%; } |
|
.col-m-right-12{ left: 100%; } |
|
} |
|
|
|
@media screen and (min-width: 900px){ |
|
.col-l-left-1{ right: 8.3333%; } |
|
.col-l-left-2{ right: 16.6666%; } |
|
.col-l-left-3{ right: 25%; } |
|
.col-l-left-4{ right: 33.3333%; } |
|
.col-l-left-5{ right: 41.6666%; } |
|
.col-l-left-6{ right: 50%; } |
|
.col-l-left-7{ right: 58.3333%; } |
|
.col-l-left-8{ right: 66.6666%; } |
|
.col-l-left-9{ right: 75%; } |
|
.col-l-left-10{ right: 83.3333%; } |
|
.col-l-left-11{ right: 91.6666%; } |
|
.col-l-left-12{ right: 100%; } |
|
|
|
.col-l-right-1{ left: 8.3333%; } |
|
.col-l-right-2{ left: 16.6666%; } |
|
.col-l-right-3{ left: 25%; } |
|
.col-l-right-4{ left: 33.3333%; } |
|
.col-l-right-5{ left: 41.6666%; } |
|
.col-l-right-6{ left: 50%; } |
|
.col-l-right-7{ left: 58.3333%; } |
|
.col-l-right-8{ left: 66.6666%; } |
|
.col-l-right-9{ left: 75%; } |
|
.col-l-right-10{ left: 83.3333%; } |
|
.col-l-right-11{ left: 91.6666%; } |
|
.col-l-right-12{ left: 100%; } |
|
} |
|
|
|
/* --- 固定的 */ |
|
.row .col-1{ |
|
-ms-flex: 0 0 8.3333%; |
|
flex: 0 0 8.3333%; |
|
max-width: 8.3333%; |
|
} |
|
|
|
.row .col-2{ |
|
-ms-flex: 0 0 16.6666%; |
|
flex: 0 0 16.6666%; |
|
max-width: 16.6666%; |
|
} |
|
|
|
.row .col-3{ |
|
-ms-flex: 0 0 25%; |
|
flex: 0 0 25%; |
|
max-width: 25%; |
|
} |
|
|
|
.row .col-4{ |
|
-ms-flex: 0 0 33.3333%; |
|
flex: 0 0 33.3333%; |
|
max-width: 33.3333%; |
|
} |
|
|
|
.row .col-5{ |
|
-ms-flex: 0 0 41.3333%; |
|
flex: 0 0 41.6666%; |
|
max-width: 41.6666%; |
|
} |
|
|
|
.row .col-6{ |
|
-ms-flex: 0 0 50%; |
|
flex: 0 0 50%; |
|
max-width: 50%; |
|
} |
|
|
|
.row .col-7{ |
|
-ms-flex: 0 0 58.3333%; |
|
flex: 0 0 58.3333%; |
|
max-width: 58.3333%; |
|
} |
|
|
|
.row .col-8{ |
|
-ms-flex: 0 0 66.6666%; |
|
flex: 0 0 66.6666%; |
|
max-width: 66.6666%; |
|
} |
|
|
|
.row .col-9{ |
|
-ms-flex: 0 0 75%; |
|
flex: 0 0 75%; |
|
max-width: 75%; |
|
} |
|
|
|
.row .col-10{ |
|
-ms-flex: 0 0 83.3333%; |
|
flex: 0 0 83.3333%; |
|
max-width: 83.3333%; |
|
} |
|
|
|
.row .col-11{ |
|
-ms-flex: 0 0 91.6666%; |
|
flex: 0 0 91.6666%; |
|
max-width: 91.6666%; |
|
} |
|
|
|
.row .col-12{ |
|
-ms-flex: 0 0 100%; |
|
flex: 0 0 100%; |
|
max-width: 100%; |
|
} |
|
|
|
/* --- 手机 */ |
|
@media screen and (min-width: 600px){ |
|
.row .col-s-1{ |
|
-ms-flex: 0 0 8.3333%; |
|
flex: 0 0 8.3333%; |
|
max-width: 8.3333%; |
|
} |
|
|
|
.row .col-s-2{ |
|
-ms-flex: 0 0 16.6666%; |
|
flex: 0 0 16.6666%; |
|
max-width: 16.6666%; |
|
} |
|
|
|
.row .col-s-3{ |
|
-ms-flex: 0 0 25%; |
|
flex: 0 0 25%; |
|
max-width: 25%; |
|
} |
|
|
|
.row .col-s-4{ |
|
-ms-flex: 0 0 33.3333%; |
|
flex: 0 0 33.3333%; |
|
max-width: 33.3333%; |
|
} |
|
|
|
.row .col-s-5{ |
|
-ms-flex: 0 0 41.3333%; |
|
flex: 0 0 41.6666%; |
|
max-width: 41.6666%; |
|
} |
|
|
|
.row .col-s-6{ |
|
-ms-flex: 0 0 50%; |
|
flex: 0 0 50%; |
|
max-width: 50%; |
|
} |
|
|
|
.row .col-s-7{ |
|
-ms-flex: 0 0 58.3333%; |
|
flex: 0 0 58.3333%; |
|
max-width: 58.3333%; |
|
} |
|
|
|
.row .col-s-8{ |
|
-ms-flex: 0 0 66.6666%; |
|
flex: 0 0 66.6666%; |
|
max-width: 66.6666%; |
|
} |
|
|
|
.row .col-s-9{ |
|
-ms-flex: 0 0 75%; |
|
flex: 0 0 75%; |
|
max-width: 75%; |
|
} |
|
|
|
.row .col-s-10{ |
|
-ms-flex: 0 0 83.3333%; |
|
flex: 0 0 83.3333%; |
|
max-width: 83.3333%; |
|
} |
|
|
|
.row .col-s-11{ |
|
-ms-flex: 0 0 91.6666%; |
|
flex: 0 0 91.6666%; |
|
max-width: 91.6666%; |
|
} |
|
|
|
.row .col-s-12{ |
|
-ms-flex: 0 0 100%; |
|
flex: 0 0 100%; |
|
max-width: 100%; |
|
} |
|
} |
|
|
|
/* --- 平板 */ |
|
@media screen and (min-width: 900px){ |
|
.row .col-m-1{ |
|
-ms-flex: 0 0 8.3333%; |
|
flex: 0 0 8.3333%; |
|
max-width: 8.3333%; |
|
} |
|
|
|
.row .col-m-2{ |
|
-ms-flex: 0 0 16.6666%; |
|
flex: 0 0 16.6666%; |
|
max-width: 16.6666%; |
|
} |
|
|
|
.row .col-m-3{ |
|
-ms-flex: 0 0 25%; |
|
flex: 0 0 25%; |
|
max-width: 25%; |
|
} |
|
|
|
.row .col-m-4{ |
|
-ms-flex: 0 0 33.3333%; |
|
flex: 0 0 33.3333%; |
|
max-width: 33.3333%; |
|
} |
|
|
|
.row .col-m-5{ |
|
-ms-flex: 0 0 41.3333%; |
|
flex: 0 0 41.6666%; |
|
max-width: 41.6666%; |
|
} |
|
|
|
.row .col-m-6{ |
|
-ms-flex: 0 0 50%; |
|
flex: 0 0 50%; |
|
max-width: 50%; |
|
} |
|
|
|
.row .col-m-7{ |
|
-ms-flex: 0 0 58.3333%; |
|
flex: 0 0 58.3333%; |
|
max-width: 58.3333%; |
|
} |
|
|
|
.row .col-m-8{ |
|
-ms-flex: 0 0 66.6666%; |
|
flex: 0 0 66.6666%; |
|
max-width: 66.6666%; |
|
} |
|
|
|
.row .col-m-9{ |
|
-ms-flex: 0 0 75%; |
|
flex: 0 0 75%; |
|
max-width: 75%; |
|
} |
|
|
|
.row .col-m-10{ |
|
-ms-flex: 0 0 83.3333%; |
|
flex: 0 0 83.3333%; |
|
max-width: 83.3333%; |
|
} |
|
|
|
.row .col-m-11{ |
|
-ms-flex: 0 0 91.6666%; |
|
flex: 0 0 91.6666%; |
|
max-width: 91.6666%; |
|
} |
|
|
|
.row .col-m-12{ |
|
-ms-flex: 0 0 100%; |
|
flex: 0 0 100%; |
|
max-width: 100%; |
|
} |
|
} |
|
|
|
/* --- 电脑 */ |
|
@media screen and (min-width: 1024px){ |
|
.row .col-l-1{ |
|
-ms-flex: 0 0 8.3333%; |
|
flex: 0 0 8.3333%; |
|
max-width: 8.3333%; |
|
} |
|
|
|
.row .col-l-2{ |
|
-ms-flex: 0 0 16.6666%; |
|
flex: 0 0 16.6666%; |
|
max-width: 16.6666%; |
|
} |
|
|
|
.row .col-l-3{ |
|
-ms-flex: 0 0 25%; |
|
flex: 0 0 25%; |
|
max-width: 25%; |
|
} |
|
|
|
.row .col-l-4{ |
|
-ms-flex: 0 0 33.3333%; |
|
flex: 0 0 33.3333%; |
|
max-width: 33.3333%; |
|
} |
|
|
|
.row .col-l-5{ |
|
-ms-flex: 0 0 41.3333%; |
|
flex: 0 0 41.6666%; |
|
max-width: 41.6666%; |
|
} |
|
|
|
.row .col-l-6{ |
|
-ms-flex: 0 0 50%; |
|
flex: 0 0 50%; |
|
max-width: 50%; |
|
} |
|
|
|
.row .col-l-7{ |
|
-ms-flex: 0 0 58.3333%; |
|
flex: 0 0 58.3333%; |
|
max-width: 58.3333%; |
|
} |
|
|
|
.row .col-l-8{ |
|
-ms-flex: 0 0 66.6666%; |
|
flex: 0 0 66.6666%; |
|
max-width: 66.6666%; |
|
} |
|
|
|
.row .col-l-9{ |
|
-ms-flex: 0 0 75%; |
|
flex: 0 0 75%; |
|
max-width: 75%; |
|
} |
|
|
|
.row .col-l-10{ |
|
-ms-flex: 0 0 83.3333%; |
|
flex: 0 0 83.3333%; |
|
max-width: 83.3333%; |
|
} |
|
|
|
.row .col-l-11{ |
|
-ms-flex: 0 0 91.6666%; |
|
flex: 0 0 91.6666%; |
|
max-width: 91.6666%; |
|
} |
|
|
|
.row .col-l-12{ |
|
-ms-flex: 0 0 100%; |
|
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-notice-list{ |
|
top: 2em; |
|
left: 0; |
|
right: 0; |
|
z-index: 60; |
|
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, 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; |
|
} |
|
|
|
.ks-notice.yellow{ |
|
background: #f1a325; |
|
} |
|
|
|
.ks-notice.blue{ |
|
background: #3498db; |
|
} |
|
|
|
.ks-notice.green{ |
|
background: #38b03f; |
|
} |
|
|
|
.ks-notice .content, .ks-notice.dismiss .close{ |
|
padding: .5em 1em; |
|
display: table-cell; |
|
} |
|
|
|
.ks-notice.dismiss .close{ |
|
cursor: pointer; |
|
border-radius: 0 1em 1em 0; |
|
transition: background .3s; |
|
} |
|
|
|
.ks-notice.dismiss .close:hover{ |
|
background: rgba(0, 0, 0, .1); |
|
} |
|
|
|
.ks-notice.dismiss .close:after{ |
|
content: '×'; |
|
font: inherit; |
|
} |
|
|
|
/* - 遮罩 */ |
|
.ks-overlay{ |
|
top: 0; |
|
left: 0; |
|
right: 0; |
|
bottom: 0; |
|
z-index: 50; |
|
position: fixed; |
|
animation: fade-in .5s both; |
|
-webkit-animation: fade-in .5s both; |
|
background: rgba(0, 0, 0, .5); |
|
} |
|
|
|
.ks-overlay.remove{ |
|
animation: fade-off .5s both; |
|
-webkit-animation: fade-off .5s both; |
|
} |
|
|
|
/* - 图片放大 */ |
|
[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{ |
|
width: 10%; |
|
height: 100%; |
|
max-width: 5em; |
|
cursor: pointer; |
|
position: absolute; |
|
transition: transform .3s; |
|
animation: fade-small-large .3s backwards; |
|
-webkit-animation: fade-small-large .3s backwards; |
|
} |
|
.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 .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; |
|
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; |
|
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) Dreamer-Paul. |
|
|
|
---- */ |