@charset "UTF-8"; /** * 这里是uni-app内置的常用样式变量 * * uni-app 官方扩展插件及插件市场(https://ext.dcloud.net.cn)上很多三方插件均使用了这些样式变量 * 如果你是插件开发者,建议你使用scss预处理,并在插件代码中直接使用这些变量(无需 import 这个文件),方便用户通过搭积木的方式开发整体风格一致的App * */ /** * 如果你是App开发者(插件使用者),你可以通过修改这些变量来定制自己的插件主题,实现自定义主题功能 * * 如果你的项目同样使用了scss预处理,你也可以直接在你的 scss 代码中使用如下变量,同时无需 import 这个文件 */ /* 颜色变量 */ /* 行为相关颜色 */ /* 文字基本颜色 */ /* 背景颜色 */ /* 边框颜色 */ /* 尺寸变量 */ /* 文字尺寸 */ /* 图片尺寸 */ /* Border Radius */ /* 水平间距 */ /* 垂直间距 */ .lvv-popup { top: 0; left: 0; width: 100%; height: 100%; position: fixed; z-index: 98; } .lvv-popup .lvv-popupmark { top: 0; left: 0; width: 100%; height: 100%; z-index: 99; position: absolute; background: rgba(0, 0, 0, 0.5); } .lvv-popup .lvv-popupmark.pt, .lvv-popup .lvv-popupmark.ht { background: none; } .lvv-popup .lvv-popupcontent { width: 100%; height: 100%; top: 0; left: 0; position: absolute; z-index: 100; } .lvv-popup .pt { -webkit-animation: showtop 0.5s; animation: showtop 0.5s; } .lvv-popup .pl { -webkit-animation: showleft 0.5s; animation: showleft 0.5s; } .lvv-popup .pr { -webkit-animation: showright 0.5s; animation: showright 0.5s; } .lvv-popup .pb { -webkit-animation: showbottom 0.5s; animation: showbottom 0.5s; } .lvv-popup .ht { -webkit-animation: hidetop 0.5s; animation: hidetop 0.5s; } .lvv-popup .hl { -webkit-animation: hideleft 0.55s; animation: hideleft 0.55s; } .lvv-popup .hr { -webkit-animation: hideright 0.55s; animation: hideright 0.55s; } .lvv-popup .hb { -webkit-animation: hidebottom 1s; animation: hidebottom 1s; } .lvv-popup .pc { -webkit-animation: showcontent 0.55s; animation: showcontent 0.55s; } .lvv-popup .hc { -webkit-animation: hidecontent 0.55s; animation: hidecontent 0.55s; } @-webkit-keyframes showtop { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 1; } 100% { top: 0px; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @keyframes showtop { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 1; } 100% { top: 0px; -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } } @-webkit-keyframes showleft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes showleft { 0% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes showright { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 1; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @keyframes showright { 0% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 1; } 50% { opacity: 0; } 100% { -webkit-transform: translateX(0); transform: translateX(0); } } @-webkit-keyframes showbottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 1; } 50% { opacity: 0.5; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes showbottom { 0% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 1; } 50% { opacity: 0.5; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes hidetop { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 1; } } @keyframes hidetop { 0% { -webkit-transform: translateY(0%); transform: translateY(0%); opacity: 1; } 100% { -webkit-transform: translateY(-100%); transform: translateY(-100%); opacity: 1; } } @-webkit-keyframes hideleft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { opacity: 0; } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } } @keyframes hideleft { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { opacity: 0; } 100% { -webkit-transform: translateX(-100%); transform: translateX(-100%); opacity: 1; } } @-webkit-keyframes hideright { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { opacity: 0; } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 1; } } @keyframes hideright { 0% { -webkit-transform: translateX(0); transform: translateX(0); } 50% { opacity: 0; } 100% { -webkit-transform: translateX(100%); transform: translateX(100%); opacity: 1; } } @-webkit-keyframes hidebottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { opacity: 0; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 1; } } @keyframes hidebottom { 0% { -webkit-transform: translateY(0); transform: translateY(0); } 50% { opacity: 0; } 100% { -webkit-transform: translateY(100%); transform: translateY(100%); opacity: 1; } } @-webkit-keyframes showcontent { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes showcontent { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes hidecontent { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes hidecontent { 0% { opacity: 1; } 100% { opacity: 0; } }