watermark/index.css

813 lines
17 KiB
CSS

#root,body,html {
height:100%;
font-family:"Monospaced Number","Chinese Quote",-apple-system,"Segoe UI",Roboto,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Helvetica Neue",Helvetica,Arial,sans-serif;
color:#333;
font-size:14px
}
body {
background-color:#fff!important
}
* {
margin:0;
padding:0;
-webkit-box-sizing:border-box;
box-sizing:border-box
}
.block-horizontal-layout,.display-flex {
display:-ms-flexbox;
display:flex
}
.block-horizontal-layout {
-ms-flex-flow:row;
flex-flow:row
}
.block-vertical-layout {
display:-ms-flexbox;
display:flex;
-ms-flex-flow:column;
flex-flow:column
}
.block-flow-layout {
display:-ms-flexbox;
display:flex;
-ms-flex-flow:wrap;
flex-flow:wrap
}
.block-justify-start {
-ms-flex-pack:start;
justify-content:flex-start
}
.block-justify-center {
-ms-flex-pack:center;
justify-content:center
}
.block-justify-end {
-ms-flex-pack:end;
justify-content:flex-end
}
.block-justify-around {
-ms-flex-pack:distribute;
justify-content:space-around
}
.block-justify-between {
-ms-flex-pack:justify;
justify-content:space-between
}
.block-align-start {
-webkit-align-items:flex-start;
-webkit-box-pack:start;
-ms-flex-align:start;
align-items:flex-start
}
.block-align-center {
-webkit-align-items:center;
-webkit-box-pack:center;
-ms-flex-align:center;
align-items:center
}
.block-align-end {
-webkit-align-items:flex-end;
-webkit-box-pack:end;
-ms-flex-align:end;
align-items:flex-end
}
.dxc-input-container {
color:#333;
font-size:14px
}
.dxc-input-box {
margin-left:10px;
overflow:hidden;
border-radius:4px;
border:1px solid #ddd
}
.dxc-input-box input {
min-width:0;
border:0;
-webkit-box-sizing:border-box;
box-sizing:border-box;
outline:none
}
.dxc-input-box input,.dxc-select {
padding-left:10px;
padding-right:10px;
height:35px
}
.dxc-select {
background:#fff
}
.dxc-input-box input::-webkit-input-placeholder {
color:#999;
padding-top:2px
}
/*! normalize.css v7.0.0 | MIT License | github.com/necolas/normalize.css */html {
line-height:1.15;
-ms-text-size-adjust:100%;
-webkit-text-size-adjust:100%
}
body {
margin:0
}
article,aside,footer,header,nav,section {
display:block
}
h1 {
font-size:2em;
margin:.67em 0
}
figcaption,figure,main {
display:block
}
figure {
margin:1em 40px
}
hr {
-webkit-box-sizing:content-box;
box-sizing:content-box;
height:0;
overflow:visible
}
pre {
font-family:monospace,monospace;
font-size:1em
}
a {
background-color:transparent;
-webkit-text-decoration-skip:objects
}
abbr[title] {
border-bottom:none;
text-decoration:underline;
-webkit-text-decoration:underline dotted;
text-decoration:underline dotted
}
b,strong {
font-weight:inherit;
font-weight:bolder
}
code,kbd,samp {
font-family:monospace,monospace;
font-size:1em
}
dfn {
font-style:italic
}
mark {
background-color:#ff0;
color:#000
}
small {
font-size:80%
}
sub,sup {
font-size:75%;
line-height:0;
position:relative;
vertical-align:baseline
}
sub {
bottom:-.25em
}
sup {
top:-.5em
}
audio,video {
display:inline-block
}
audio:not([controls]) {
display:none;
height:0
}
img {
border-style:none
}
svg:not(:root) {
overflow:hidden
}
button,input,optgroup,select,textarea {
font-family:sans-serif;
font-size:100%;
line-height:1.15;
margin:0
}
button,input {
overflow:visible
}
button,select {
text-transform:none
}
[type=reset],[type=submit],button,html [type=button] {
-webkit-appearance:button
}
[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner {
border-style:none;
padding:0
}
[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring {
outline:1px dotted ButtonText
}
fieldset {
padding:.35em .75em .625em
}
legend {
-webkit-box-sizing:border-box;
box-sizing:border-box;
color:inherit;
display:table;
max-width:100%;
padding:0;
white-space:normal
}
progress {
display:inline-block;
vertical-align:baseline
}
textarea {
overflow:auto
}
[type=checkbox],[type=radio] {
-webkit-box-sizing:border-box;
box-sizing:border-box;
padding:0
}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button {
height:auto
}
[type=search] {
-webkit-appearance:textfield;
outline-offset:-2px
}
[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration {
-webkit-appearance:none
}
::-webkit-file-upload-button {
-webkit-appearance:button;
font:inherit
}
details,menu {
display:block
}
summary {
display:list-item
}
canvas {
display:inline-block
}
[hidden],template {
display:none
}
.am-fade-appear,.am-fade-enter {
opacity:0
}
.am-fade-appear,.am-fade-enter,.am-fade-leave {
-webkit-animation-duration:.2s;
animation-duration:.2s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-timing-function:cubic-bezier(.55,0,.55,.2);
animation-timing-function:cubic-bezier(.55,0,.55,.2);
-webkit-animation-play-state:paused;
animation-play-state:paused
}
.am-fade-appear.am-fade-appear-active,.am-fade-enter.am-fade-enter-active {
-webkit-animation-name:amFadeIn;
animation-name:amFadeIn;
-webkit-animation-play-state:running;
animation-play-state:running
}
.am-fade-leave.am-fade-leave-active {
-webkit-animation-name:amFadeOut;
animation-name:amFadeOut;
-webkit-animation-play-state:running;
animation-play-state:running
}
@-webkit-keyframes amFadeIn {
0% {
opacity:0
}
to {
opacity:1
}
}@keyframes amFadeIn {
0% {
opacity:0
}
to {
opacity:1
}
}@-webkit-keyframes amFadeOut {
0% {
opacity:1
}
to {
opacity:0
}
}@keyframes amFadeOut {
0% {
opacity:1
}
to {
opacity:0
}
}.am-slide-up-appear,.am-slide-up-enter {
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
.am-slide-up-appear,.am-slide-up-enter,.am-slide-up-leave {
-webkit-animation-duration:.2s;
animation-duration:.2s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-timing-function:cubic-bezier(.55,0,.55,.2);
animation-timing-function:cubic-bezier(.55,0,.55,.2);
-webkit-animation-play-state:paused;
animation-play-state:paused
}
.am-slide-up-appear.am-slide-up-appear-active,.am-slide-up-enter.am-slide-up-enter-active {
-webkit-animation-name:amSlideUpIn;
animation-name:amSlideUpIn;
-webkit-animation-play-state:running;
animation-play-state:running
}
.am-slide-up-leave.am-slide-up-leave-active {
-webkit-animation-name:amSlideUpOut;
animation-name:amSlideUpOut;
-webkit-animation-play-state:running;
animation-play-state:running
}
@-webkit-keyframes amSlideUpIn {
0% {
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
to {
-webkit-transform:translate(0);
transform:translate(0)
}
}@keyframes amSlideUpIn {
0% {
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
to {
-webkit-transform:translate(0);
transform:translate(0)
}
}@-webkit-keyframes amSlideUpOut {
0% {
-webkit-transform:translate(0);
transform:translate(0)
}
to {
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}@keyframes amSlideUpOut {
0% {
-webkit-transform:translate(0);
transform:translate(0)
}
to {
-webkit-transform:translateY(100%);
transform:translateY(100%)
}
}.am.am-zoom-enter,.am.am-zoom-leave {
display:block
}
.am-zoom-appear,.am-zoom-enter {
opacity:0;
-webkit-animation-duration:.2s;
animation-duration:.2s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-timing-function:cubic-bezier(.55,0,.55,.2);
animation-timing-function:cubic-bezier(.55,0,.55,.2);
-webkit-animation-timing-function:cubic-bezier(.18,.89,.32,1.28);
animation-timing-function:cubic-bezier(.18,.89,.32,1.28);
-webkit-animation-play-state:paused;
animation-play-state:paused
}
.am-zoom-leave {
-webkit-animation-duration:.2s;
animation-duration:.2s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-timing-function:cubic-bezier(.55,0,.55,.2);
animation-timing-function:cubic-bezier(.55,0,.55,.2);
-webkit-animation-timing-function:cubic-bezier(.6,-.3,.74,.05);
animation-timing-function:cubic-bezier(.6,-.3,.74,.05);
-webkit-animation-play-state:paused;
animation-play-state:paused
}
.am-zoom-appear.am-zoom-appear-active,.am-zoom-enter.am-zoom-enter-active {
-webkit-animation-name:amZoomIn;
animation-name:amZoomIn;
-webkit-animation-play-state:running;
animation-play-state:running
}
.am-zoom-leave.am-zoom-leave-active {
-webkit-animation-name:amZoomOut;
animation-name:amZoomOut;
-webkit-animation-play-state:running;
animation-play-state:running
}
@-webkit-keyframes amZoomIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(0);
transform:scale(0)
}
to {
opacity:1;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(1);
transform:scale(1)
}
}@keyframes amZoomIn {
0% {
opacity:0;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(0);
transform:scale(0)
}
to {
opacity:1;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(1);
transform:scale(1)
}
}@-webkit-keyframes amZoomOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(1);
transform:scale(1)
}
to {
opacity:0;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(0);
transform:scale(0)
}
}@keyframes amZoomOut {
0% {
opacity:1;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(1);
transform:scale(1)
}
to {
opacity:0;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scale(0);
transform:scale(0)
}
}.am-slide-down-appear,.am-slide-down-enter {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
.am-slide-down-appear,.am-slide-down-enter,.am-slide-down-leave {
-webkit-animation-duration:.2s;
animation-duration:.2s;
-webkit-animation-fill-mode:both;
animation-fill-mode:both;
-webkit-animation-timing-function:cubic-bezier(.55,0,.55,.2);
animation-timing-function:cubic-bezier(.55,0,.55,.2);
-webkit-animation-play-state:paused;
animation-play-state:paused
}
.am-slide-down-appear.am-slide-down-appear-active,.am-slide-down-enter.am-slide-down-enter-active {
-webkit-animation-name:amSlideDownIn;
animation-name:amSlideDownIn;
-webkit-animation-play-state:running;
animation-play-state:running
}
.am-slide-down-leave.am-slide-down-leave-active {
-webkit-animation-name:amSlideDownOut;
animation-name:amSlideDownOut;
-webkit-animation-play-state:running;
animation-play-state:running
}
@-webkit-keyframes amSlideDownIn {
0% {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
to {
-webkit-transform:translate(0);
transform:translate(0)
}
}@keyframes amSlideDownIn {
0% {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
to {
-webkit-transform:translate(0);
transform:translate(0)
}
}@-webkit-keyframes amSlideDownOut {
0% {
-webkit-transform:translate(0);
transform:translate(0)
}
to {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}@keyframes amSlideDownOut {
0% {
-webkit-transform:translate(0);
transform:translate(0)
}
to {
-webkit-transform:translateY(-100%);
transform:translateY(-100%)
}
}*,:after,:before {
-webkit-tap-highlight-color:rgba(0,0,0,0)
}
body {
background-color:#f5f5f9;
font-size:14px
}
[contenteditable] {
-webkit-user-select:auto!important
}
:focus,a {
outline:none
}
a {
background:transparent;
text-decoration:none
}
.am-picker-col {
display:block;
position:relative;
height:238px;
overflow:hidden;
width:100%
}
.am-picker-col-content {
position:absolute;
left:0;
top:0;
width:100%;
z-index:1;
padding:102px 0
}
.am-picker-col-item {
-ms-touch-action:manipulation;
touch-action:manipulation;
text-align:center;
font-size:16px;
height:34px;
line-height:34px;
color:#000;
white-space:nowrap;
text-overflow:ellipsis
}
.am-picker-col-item-selected {
font-size:17px
}
.am-picker-col-mask {
top:0;
height:100%;
margin:0 auto;
background-image:-webkit-gradient(linear,left top,left bottom,from(hsla(0,0%,100%,.95)),to(hsla(0,0%,100%,.6))),-webkit-gradient(linear,left bottom,left top,from(hsla(0,0%,100%,.95)),to(hsla(0,0%,100%,.6)));
background-image:linear-gradient(180deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6)),linear-gradient(0deg,hsla(0,0%,100%,.95),hsla(0,0%,100%,.6));
background-position:top,bottom;
background-size:100% 102px;
background-repeat:no-repeat
}
.am-picker-col-indicator,.am-picker-col-mask {
position:absolute;
left:0;
width:100%;
z-index:3
}
.am-picker-col-indicator {
-webkit-box-sizing:border-box;
box-sizing:border-box;
height:34px;
top:102px;
border-top:1px solid #ddd;
border-bottom:1px solid #ddd
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx) {
html:not([data-scale]) .am-picker-col-indicator {
border-top:none
}
html:not([data-scale]) .am-picker-col-indicator:before {
content:"";
position:absolute;
background-color:#ddd;
display:block;
z-index:1;
top:0;
right:auto;
bottom:auto;
left:0;
width:100%;
height:1px;
-webkit-transform-origin:50% 50%;
transform-origin:50% 50%;
-webkit-transform:scaleY(.5);
transform:scaleY(.5)
}
}@media (-webkit-min-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:3),(min-resolution:2dppx) and (min-resolution:3dppx) {
html:not([data-scale]) .am-picker-col-indicator:before {
-webkit-transform:scaleY(.33);
transform:scaleY(.33)
}
}@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx) {
html:not([data-scale]) .am-picker-col-indicator {
border-bottom:none
}
html:not([data-scale]) .am-picker-col-indicator:after {
content:"";
position:absolute;
background-color:#ddd;
display:block;
z-index:1;
top:auto;
right:auto;
bottom:0;
left:0;
width:100%;
height:1px;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%;
-webkit-transform:scaleY(.5);
transform:scaleY(.5)
}
}@media (-webkit-min-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:3),(min-resolution:2dppx) and (min-resolution:3dppx) {
html:not([data-scale]) .am-picker-col-indicator:after {
-webkit-transform:scaleY(.33);
transform:scaleY(.33)
}
}.am-picker {
display:-ms-flexbox;
display:flex;
-ms-flex-align:center;
align-items:center
}
.am-picker-item {
-ms-flex:1 1;
flex:1 1;
text-align:center
}
.am-picker-popup {
left:0;
bottom:0;
position:fixed;
width:100%;
background-color:#fff
}
.am-picker-popup-wrap {
overflow:auto;
-webkit-overflow-scrolling:touch;
outline:0
}
.am-picker-popup-mask,.am-picker-popup-wrap {
position:fixed;
top:0;
right:0;
bottom:0;
left:0;
z-index:1000
}
.am-picker-popup-mask {
background-color:rgba(0,0,0,.4);
height:100%
}
.am-picker-popup-mask-hidden {
display:none
}
.am-picker-popup-header {
background-image:-webkit-gradient(linear,left top,left bottom,from(#e7e7e7),color-stop(#e7e7e7),color-stop(transparent),to(transparent));
background-image:linear-gradient(180deg,#e7e7e7,#e7e7e7,transparent,transparent);
background-position:bottom;
background-size:100% 1px;
background-repeat:no-repeat;
display:-ms-flexbox;
display:flex;
-ms-flex-align:center;
align-items:center;
position:relative;
border-bottom:1px solid #ddd
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx) {
html:not([data-scale]) .am-picker-popup-header {
border-bottom:none
}
html:not([data-scale]) .am-picker-popup-header:after {
content:"";
position:absolute;
background-color:#ddd;
display:block;
z-index:1;
top:auto;
right:auto;
bottom:0;
left:0;
width:100%;
height:1px;
-webkit-transform-origin:50% 100%;
transform-origin:50% 100%;
-webkit-transform:scaleY(.5);
transform:scaleY(.5)
}
}@media (-webkit-min-device-pixel-ratio:2) and (-webkit-min-device-pixel-ratio:3),(min-resolution:2dppx) and (min-resolution:3dppx) {
html:not([data-scale]) .am-picker-popup-header:after {
-webkit-transform:scaleY(.33);
transform:scaleY(.33)
}
}.am-picker-popup-header .am-picker-popup-header-right {
text-align:right
}
.am-picker-popup-item {
color:#108ee9;
font-size:17px;
padding:9px 15px;
height:42px;
-webkit-box-sizing:border-box;
box-sizing:border-box;
display:-ms-flexbox;
display:flex;
-ms-flex-align:center;
align-items:center;
-ms-flex-pack:center;
justify-content:center
}
.am-picker-popup-item-active {
background-color:#ddd
}
.am-picker-popup-title {
-ms-flex:1 1;
flex:1 1;
text-align:center;
color:#000
}
.am-picker-popup .am-picker-popup-close {
display:none
}
.am-picker-col {
-ms-flex:1 1;
flex:1 1
}
.main_box___1iH-2 {
margin-top:30px
}
.main_box___1iH-2,.menu_box___-8z6Z {
display:-ms-flexbox;
display:flex;
-ms-flex-pack:center;
justify-content:center
}
.menu_box___-8z6Z {
-ms-flex-direction:column;
flex-direction:column;
border:1px dashed #f0f0f0;
padding:30px;
border-top-left-radius:12px;
border-bottom-left-radius:12px;
background:#f5f7fa
}
.form_item_box___36MyA {
display:-ms-flexbox;
display:flex;
-ms-flex-align:center;
align-items:center
}
.canvas_box___5bn4r {
width:1366px;
height:960px;
padding:12px;
border:1px dashed #f0f0f0;
border-top-right-radius:12px;
border-bottom-right-radius:12px;
border-left:none;
background:#fafafa;
overflow-x:hidden;
overflow-y:auto
}
@media (max-width:768px) {
.canvas_box___5bn4r {
margin-left:0;
margin-top:20px
}
.main_box___1iH-2 {
-ms-flex-flow:column;
flex-flow:column
}
}