From 77897befb9d432bb4f6651fe5ea3191de3840d1c Mon Sep 17 00:00:00 2001 From: MattTheTekie <94870997+MattTheTekie@users.noreply.github.com> Date: Fri, 5 May 2023 13:23:40 -0400 Subject: [PATCH] Add files via upload --- kico.css | 1459 ++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 1459 insertions(+) create mode 100644 kico.css diff --git a/kico.css b/kico.css new file mode 100644 index 0000000..fac2a6e --- /dev/null +++ b/kico.css @@ -0,0 +1,1459 @@ +@charset "UTF-8"; + +/* ---- + +# Kico Style 1.0 +# By: Dreamer-Paul +# Last Update: 2021.11.19 + +一个可口的极简响应式前端框架。 + +本代码为奇趣保罗原创，并遵守 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; +} + +*, *: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); +} + +@media (prefers-reduced-motion: no-preference){ + :root{ + scroll-behavior: smooth; + } +} + +body{ + color: #353535; + scroll-behavior: smooth; + -webkit-text-size-adjust: 100%; + -webkit-tap-highlight-color: transparent; + font: 16px/1.5 'Microsoft Yahei', 'PingFang SC', 'Hiragino Sans GB', sans-serif; +} + +/* - 选择内容 */ +::-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: 14px } +.font-m{ font-size: 16px } +.font-l{ font-size: 18px } + +@media screen and (max-width: 768px){ + .font-auto{ font-size: 14px } +} + +@media screen and (min-width: 1921px){ + .font-auto{ font-size: 18px } +} + +.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; +} + +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{ + outline: 0; + font: inherit; +} + +.btn{ + color: inherit; + cursor: pointer; + background: #fff; + padding: .5em 1em; + border-radius: 4px; + 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{ font-family: 'Consolas', 'Courier New', monospace } + +:not(pre) > code{ + color: #c40b00; + font-size: 85%; + word-wrap: normal; + border-radius: .5em; + padding: .25em .5em; + word-break: break-all; + background-color: #f7f2f4; +} + +pre > code{ + color: #fff; + tab-size: 4; + 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 .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: 4px; + 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; + 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, .15); + transition: .3s border-color, .3s background-color; +} + +input[type="range"]::-moz-range-track{ + width: 240px; + height: 2px; + background: rgba(0, 50, 126, .12); +} + +input[type="range"]::-moz-range-thumb{ + width: 14px; + height: 14px; + background: #fff; + border-radius: 50px; + border: 1px solid rgba(0, 30, 75, .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; +} + +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: #3498db; + background: 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: #3498db; + background: 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: #3498db; + background: 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. + +---- */