parent
553c99df87
commit
ec09f1604f
@ -1,236 +1,246 @@ |
|||||||
#table { |
#table { |
||||||
display: table; |
display: table; |
||||||
text-align: center; |
text-align: center; |
||||||
} |
} |
||||||
#table > div { |
#table > div { |
||||||
display: table-row; |
display: table-row; |
||||||
} |
} |
||||||
#table > div > div { |
#table > div > div { |
||||||
display: table-cell; |
display: table-cell; |
||||||
} |
} |
||||||
|
|
||||||
.card-container { |
.card-container { |
||||||
padding: 20px 10px; |
padding: 20px 10px; |
||||||
} |
} |
||||||
|
|
||||||
.switch { |
.switch { |
||||||
display: none; |
display: none; |
||||||
color: #FFF; |
color: #FFF; |
||||||
} |
} |
||||||
|
|
||||||
.onEdit .switch { |
.onEdit .switch { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
.onEdit .front .switch { |
.onEdit .front .switch { |
||||||
visibility: hidden; |
visibility: hidden; |
||||||
} |
} |
||||||
|
|
||||||
.card { |
.card { |
||||||
position: relative; |
position: relative; |
||||||
white-space: normal; |
white-space: normal; |
||||||
width: 180px; |
width: 180px; |
||||||
height: 180px; |
height: 180px; |
||||||
|
|
||||||
overflow: hidden; |
overflow: hidden; |
||||||
|
|
||||||
|
-webkit-border-radius: 8px; |
||||||
|
-moz-border-radius: 8px; |
||||||
|
-ms-border-radius: 8px; |
||||||
|
border-radius: 8px; |
||||||
|
} |
||||||
|
|
||||||
|
.front{ |
||||||
|
height: 100%; |
||||||
|
|
||||||
-webkit-border-radius: 8px; |
|
||||||
-moz-border-radius: 8px; |
|
||||||
-ms-border-radius: 8px; |
|
||||||
border-radius: 8px; |
|
||||||
} |
} |
||||||
|
|
||||||
.front .card { |
.front .card { |
||||||
background: url("images/pile-bg.png") center no-repeat, url("images/mark.png") center no-repeat; |
background: url("images/pile-bg.png") center no-repeat, url("images/mark.png") center no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
.back .card { |
.back .card { |
||||||
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
-webkit-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
||||||
-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
-moz-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
||||||
-ms-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
-ms-box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
||||||
box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
box-shadow: 0 1px 3px rgba(0,0,0, 0.65); |
||||||
|
|
||||||
background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
background-image: linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
||||||
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
background-image: -o-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
||||||
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
background-image: -moz-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
||||||
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
background-image: -webkit-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
||||||
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
background-image: -ms-linear-gradient(top, rgb(255,255,255) 0%, rgb(204,204,204) 100%); |
||||||
|
|
||||||
background-image: -webkit-gradient( |
background-image: -webkit-gradient( |
||||||
linear, |
linear, |
||||||
50% top, |
50% top, |
||||||
50% bottom, |
50% bottom, |
||||||
color-stop(0, rgb(255,255,255)), |
color-stop(0, rgb(255,255,255)), |
||||||
color-stop(1, rgb(204,204,204)) |
color-stop(1, rgb(204,204,204)) |
||||||
); |
); |
||||||
} |
} |
||||||
|
|
||||||
.card > div { |
.card > div { |
||||||
display: table-cell; |
display: table-cell; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
text-align: center; |
text-align: center; |
||||||
width: 180px; |
width: 180px; |
||||||
height: 180px; |
height: 180px; |
||||||
} |
} |
||||||
|
|
||||||
.card .text { |
.card .text { |
||||||
padding: 0px 20px; |
padding: 0px 20px; |
||||||
font-family: "SFToontimeRegular"; |
font-family: "SFToontimeRegular"; |
||||||
font-size: 28px; |
font-size: 28px; |
||||||
color: #000; |
color: #000; |
||||||
} |
} |
||||||
|
|
||||||
.usePicture .card .text, .front .card .text { |
.usePicture .card .text, .front .card .text { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.card .picture { |
.card .picture { |
||||||
display: none; |
display: none; |
||||||
|
|
||||||
position: absolute; |
position: absolute; |
||||||
top: 0; |
top: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
left: 0; |
left: 0; |
||||||
right: 0; |
right: 0; |
||||||
|
|
||||||
-webkit-border-radius: 8px; |
-webkit-border-radius: 8px; |
||||||
-moz-border-radius: 8px; |
-moz-border-radius: 8px; |
||||||
-ms-border-radius: 8px; |
-ms-border-radius: 8px; |
||||||
border-radius: 8px; |
border-radius: 8px; |
||||||
} |
} |
||||||
|
|
||||||
.usePicture .card .picture { |
.usePicture .card .picture { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
.card .picture > div { |
.card .picture > div { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 0; |
top: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
left: 0; |
left: 0; |
||||||
right: 0; |
right: 0; |
||||||
|
|
||||||
-webkit-border-radius: 8px; |
-webkit-border-radius: 8px; |
||||||
-moz-border-radius: 8px; |
-moz-border-radius: 8px; |
||||||
-ms-border-radius: 8px; |
-ms-border-radius: 8px; |
||||||
border-radius: 8px; |
border-radius: 8px; |
||||||
} |
} |
||||||
|
|
||||||
.card .picture > div:first-child { |
.card .picture > div:first-child { |
||||||
position: relative; |
position: relative; |
||||||
display: table-cell; |
display: table-cell; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
width: 180px; |
width: 180px; |
||||||
height: 180px; |
height: 180px; |
||||||
} |
} |
||||||
.card .picture > div img { |
.card .picture > div img { |
||||||
max-width: 100%; |
max-width: 100%; |
||||||
vertical-align: middle; |
max-height: 100%; |
||||||
|
vertical-align: middle; |
||||||
} |
} |
||||||
|
|
||||||
.card .picture > div.dropzone { |
.card .picture > div.dropzone { |
||||||
border: 1px dashed black; |
border: 1px dashed black; |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.onEdit .card .picture > div.dropzone { |
.onEdit .card .picture > div.dropzone { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
.card .picture > div.dropzone div { |
.card .picture > div.dropzone div { |
||||||
padding: 10px 10px 10px 50px; |
padding: 10px 10px 10px 50px; |
||||||
text-align: left; |
text-align: left; |
||||||
color: rgba(255, 255, 255, 0.5); |
color: rgba(255, 255, 255, 0.5); |
||||||
background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat; |
background: rgba(0, 0, 0, 0.4) url("images/drop-label-bg.png") 10px center no-repeat; |
||||||
|
|
||||||
-webkit-border-radius: 8px 8px 0 0; |
-webkit-border-radius: 8px 8px 0 0; |
||||||
-moz-border-radius: 8px 8px 0 0; |
-moz-border-radius: 8px 8px 0 0; |
||||||
-ms-border-radius: 8px 8px 0 0; |
-ms-border-radius: 8px 8px 0 0; |
||||||
border-radius: 8px 8px 0 0; |
border-radius: 8px 8px 0 0; |
||||||
} |
} |
||||||
|
|
||||||
.card .picture > div.dropzone.hover div { |
.card .picture > div.dropzone.hover div { |
||||||
background-image: url("images/drop-label-ondrop-bg.png"); |
background-image: url("images/drop-label-ondrop-bg.png"); |
||||||
color: rgba(255, 255, 255, 1); |
color: rgba(255, 255, 255, 1); |
||||||
} |
} |
||||||
|
|
||||||
.card-container .actions { |
.card-container .actions { |
||||||
position: relative; |
position: relative; |
||||||
margin-top: -35px; |
margin-top: -35px; |
||||||
display: none; |
display: none; |
||||||
color: #FFF; |
color: #FFF; |
||||||
} |
} /*here!!!!!!!!!*/ |
||||||
|
|
||||||
.onEdit .card-container .actions { |
.onEdit .card-container .actions { |
||||||
display: block; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.actions button[role="flip"] { |
.actions button[role="flip"] { |
||||||
margin: 0; |
margin: 0; |
||||||
padding: 0; |
padding: 0; |
||||||
border: none; |
border: none; |
||||||
cursor: pointer; |
cursor: pointer; |
||||||
width: 50px; |
width: 50px; |
||||||
height: 50px; |
height: 50px; |
||||||
background: url("images/flip.png") left center no-repeat; |
background: url("images/flip.png") left center no-repeat; |
||||||
text-indent: -99999px; |
text-indent: -99999px; |
||||||
} |
} |
||||||
|
|
||||||
.card-container { |
.card-container { |
||||||
-webkit-perspective: 600px; |
/*-webkit-perspective: 600px;*/ |
||||||
position: relative; |
position: relative; |
||||||
width: 180px; |
width: 180px; |
||||||
height: 180px; |
height: 180px; |
||||||
} |
} |
||||||
|
|
||||||
.onEdit .card-container { |
.onEdit .card-container { |
||||||
height: 200px; |
height: 200px; |
||||||
} |
} |
||||||
|
|
||||||
.cards { |
.cards { |
||||||
position: relative; |
position: relative; |
||||||
width:100%; |
width:100%; |
||||||
height: 100%; |
height: 100%; |
||||||
|
overflow: hidden; |
||||||
} |
} |
||||||
|
|
||||||
.cards > div { |
.cards > div { |
||||||
position: absolute; |
float: left; |
||||||
} |
} |
||||||
|
|
||||||
.csstransforms3d .cards > div { |
.csstransforms3d .cards > div { |
||||||
-webkit-transform-style: preserve-3d; |
-webkit-transition: all .5s ease-in-out; |
||||||
-webkit-transition: all .5s ease-in-out; |
/*-webkit-backface-visibility: hidden;*/ |
||||||
-webkit-backface-visibility: hidden; |
|
||||||
} |
} |
||||||
|
|
||||||
.csstransforms3d .cards > div:first-child { |
.csstransforms3d .cards > div:first-child { |
||||||
-webkit-transform: rotateY( 0deg ); |
/*-webkit-transform: rotateY( 0deg );*/ |
||||||
} |
} |
||||||
|
|
||||||
.no-csstransforms3d .cards > div:first-child { |
.no-csstransforms3d .cards > div:first-child { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
.csstransforms3d .cards > div:last-child { |
.csstransforms3d .cards > div:last-child { |
||||||
-webkit-transform: rotateY( -180deg ); |
/* -webkit-transform: rotateY( -180deg );*/ |
||||||
} |
} |
||||||
|
|
||||||
.no-csstransforms3d .cards > div:last-child { |
.no-csstransforms3d .cards > div:last-child { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.csstransforms3d .cards.flip > div:first-child { |
.csstransforms3d .cards.flip > div:first-child { |
||||||
-webkit-transform: rotateY( 180deg ); |
height: 0; |
||||||
|
-webkit-transition-property: height; |
||||||
|
-webkit-transition-duration: 0.5s; |
||||||
|
/*transition-timing-function: ease;*/ |
||||||
} |
} |
||||||
|
|
||||||
.no-csstransforms3d .cards.flip > div:first-child { |
.no-csstransforms3d .cards.flip > div:first-child { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.csstransforms3d .cards.flip > div:last-child { |
.csstransforms3d .cards.flip > div:last-child { |
||||||
-webkit-transform: rotateY( 0deg ); |
/*-webkit-transform: rotateY( 0deg );*/ |
||||||
|
|
||||||
} |
} |
||||||
|
|
||||||
.no-csstransforms3d .cards.flip > div:last-child { |
.no-csstransforms3d .cards.flip > div:last-child { |
||||||
display: block; |
display: block; |
||||||
} |
} |
@ -1,310 +1,310 @@ |
|||||||
html, body { |
html, body { |
||||||
margin:0; |
margin:0; |
||||||
padding: 0; |
padding: 0; |
||||||
font-family: "helvetica neue"; |
font-family: "helvetica neue"; |
||||||
font-size: 14px; |
font-size: 14px; |
||||||
color: #666666; |
color: #666666; |
||||||
} |
} |
||||||
|
|
||||||
#ubwidget { |
#ubwidget { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 0; |
top: 0; |
||||||
bottom: 0; |
bottom: 0; |
||||||
left: 0; |
left: 0; |
||||||
right: 0; |
right: 0; |
||||||
background: url("images/bg.png"); |
background: url("images/bg.png"); |
||||||
} |
} |
||||||
|
|
||||||
.theme-pad #ubwidget { |
.theme-pad #ubwidget { |
||||||
border-radius: 40px; |
border-radius: 40px; |
||||||
border-width: 52px; |
border-width: 52px; |
||||||
|
|
||||||
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
-webkit-border-image: url("images/pad-bd.png") 52 repeat; |
||||||
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
-moz-border-image: url("images/pad-bd.png") 52 repeat; |
||||||
border-image: url("images/pad-bd.png") 52 repeat; |
border-image: url("images/pad-bd.png") 52 repeat; |
||||||
} |
} |
||||||
|
|
||||||
.theme-slate #ubwidget { |
.theme-slate #ubwidget { |
||||||
border-radius: 44px; |
border-radius: 44px; |
||||||
border-width: 52px; |
border-width: 52px; |
||||||
|
|
||||||
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
-webkit-border-image: url("images/slate-bd.png") 52 repeat; |
||||||
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
-moz-border-image: url("images/slate-bd.png") 52 repeat; |
||||||
border-image: url("images/slate-bd.png") 52 repeat; |
border-image: url("images/slate-bd.png") 52 repeat; |
||||||
} |
} |
||||||
|
|
||||||
#ubwidget > .wrapper { |
#ubwidget > .wrapper { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 0px; |
top: 0px; |
||||||
bottom: 0px; |
bottom: 0px; |
||||||
left: 0px; |
left: 0px; |
||||||
right: 0px; |
right: 0px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper { |
.theme-slate #ubwidget > .wrapper, .theme-pad #ubwidget > .wrapper { |
||||||
position: absolute; |
position: absolute; |
||||||
top: -49px; |
top: -49px; |
||||||
bottom: -5px; |
bottom: -5px; |
||||||
left: -5px; |
left: -5px; |
||||||
right: -5px; |
right: -5px; |
||||||
overflow: hidden; |
overflow: hidden; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar { |
#toolbar { |
||||||
display: table; |
display: table; |
||||||
width: 100%; |
width: 100%; |
||||||
height: 44px; |
height: 44px; |
||||||
font-family: "Lobster13Regular"; |
font-family: "Lobster13Regular"; |
||||||
font-size: 24px; |
font-size: 24px; |
||||||
color: #FFCC99; |
color: #FFCC99; |
||||||
padding:0 10px; |
padding:0 10px; |
||||||
} |
} |
||||||
|
|
||||||
.theme-pad #toolbar, .theme-slate #toolbar { |
.theme-pad #toolbar, .theme-slate #toolbar { |
||||||
height: 38px; |
height: 38px; |
||||||
padding: 6px 0 0; |
padding: 6px 0 0; |
||||||
} |
} |
||||||
|
|
||||||
.theme-slate #toolbar { |
.theme-slate #toolbar { |
||||||
color: #7F613F; |
color: #7F613F; |
||||||
text-shadow: #FFDCA9 0 1px 0; |
text-shadow: #FFDCA9 0 1px 0; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
#toolbar > * { |
#toolbar > * { |
||||||
display: table-cell; |
display: table-cell; |
||||||
height: 100%; |
height: 100%; |
||||||
vertical-align: middle; |
vertical-align: middle; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar .actions { |
#toolbar .actions { |
||||||
text-align: right; |
text-align: right; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar button, h1 { |
#toolbar button, h1 { |
||||||
font-weight: normal; |
font-weight: normal; |
||||||
font-family: "Lobster13Regular"; |
font-family: "Lobster13Regular"; |
||||||
font-size: 24px; |
font-size: 24px; |
||||||
color: #FFCC99; |
color: #FFCC99; |
||||||
margin: 0; |
margin: 0; |
||||||
} |
} |
||||||
|
|
||||||
.theme-slate #toolbar button, .theme-slate h1 { |
.theme-slate #toolbar button, .theme-slate h1 { |
||||||
color: #7F613F; |
color: #7F613F; |
||||||
text-shadow: #FFDCA9 0 1px 0; |
text-shadow: #FFDCA9 0 1px 0; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar button { |
#toolbar button { |
||||||
border: none; |
border: none; |
||||||
padding: none; |
padding: none; |
||||||
outline: none; |
outline: none; |
||||||
background: none; |
background: none; |
||||||
|
|
||||||
cursor: pointer; |
cursor: pointer; |
||||||
padding-left: 34px; |
padding-left: 34px; |
||||||
margin-left: 10px; |
margin-left: 10px; |
||||||
height: 32px; |
height: 32px; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar button span { |
#toolbar button span { |
||||||
display: block; |
display: block; |
||||||
line-height: 32px; |
line-height: 32px; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar button[role='edit'] { |
#toolbar button[role='edit'] { |
||||||
background: url("images/toolbar-edit.png") left top no-repeat; |
background: url("images/toolbar-edit.png") left top no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar button[role='view'] { |
#toolbar button[role='view'] { |
||||||
display: none; |
display: none; |
||||||
color: #FFF; |
color: #FFF; |
||||||
background: url("images/toolbar-edit.png") left -32px no-repeat; |
background: url("images/toolbar-edit.png") left -32px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar button[role='reload'] { |
#toolbar button[role='reload'] { |
||||||
background: url("images/toolbar-reload.png") left top no-repeat; |
background: url("images/toolbar-reload.png") left top no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
#toolbar button[role='help'] { |
#toolbar button[role='help'] { |
||||||
background: url("images/toolbar-help.png") left top no-repeat; |
background: url("images/toolbar-help.png") left top no-repeat; |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.hasHelp #toolbar button[role='help'] { |
.hasHelp #toolbar button[role='help'] { |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.showHelp #toolbar button[role='help'] { |
.showHelp #toolbar button[role='help'] { |
||||||
color: #FFF; |
color: #FFF; |
||||||
background-position: left -32px; |
background-position: left -32px; |
||||||
} |
} |
||||||
|
|
||||||
.theme-slate #toolbar button[role='edit'] { |
.theme-slate #toolbar button[role='edit'] { |
||||||
background-image: url("images/slate-toolbar-edit.png"); |
background-image: url("images/slate-toolbar-edit.png"); |
||||||
} |
} |
||||||
|
|
||||||
.theme-slate #toolbar button[role='view'] { |
.theme-slate #toolbar button[role='view'] { |
||||||
text-shadow: #7F613F 0 -1px 0; |
text-shadow: #7F613F 0 -1px 0; |
||||||
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
background: url("images/slate-toolbar-edit.png") left -32px no-repeat; |
||||||
} |
} |
||||||
|
|
||||||
.theme-slate #toolbar button[role='reload'] { |
.theme-slate #toolbar button[role='reload'] { |
||||||
background-image: url("images/slate-toolbar-reload.png"); |
background-image: url("images/slate-toolbar-reload.png"); |
||||||
} |
} |
||||||
|
|
||||||
.theme-slate #toolbar button[role='help'] { |
.theme-slate #toolbar button[role='help'] { |
||||||
background-image: url("images/slate-toolbar-help.png"); |
background-image: url("images/slate-toolbar-help.png"); |
||||||
} |
} |
||||||
|
|
||||||
.showHelp.theme-slate #toolbar button[role='help'] { |
.showHelp.theme-slate #toolbar button[role='help'] { |
||||||
text-shadow: #7F613F 0 -1px 0; |
text-shadow: #7F613F 0 -1px 0; |
||||||
} |
} |
||||||
|
|
||||||
|
|
||||||
.onEdit #toolbar button[role='view'] { |
.onEdit #toolbar button[role='view'] { |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
.onEdit #toolbar button[role='edit'] { |
.onEdit #toolbar button[role='edit'] { |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
#help { |
#help { |
||||||
width: 300px; |
width: 300px; |
||||||
height: 400px; |
height: 400px; |
||||||
position: absolute; |
position: absolute; |
||||||
margin-top: 10px; |
margin-top: 10px; |
||||||
right: 10px; |
right: 10px; |
||||||
z-index: 10000; |
z-index: 10000; |
||||||
display: none; |
display: none; |
||||||
} |
} |
||||||
|
|
||||||
.showHelp #help { |
.showHelp #help { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
#content { |
#content { |
||||||
position: absolute; |
position: absolute; |
||||||
top: 44px; |
top: 44px; |
||||||
bottom: 0; |
bottom: 0; |
||||||
overflow: auto; |
overflow: auto; |
||||||
left: 0; |
left: 0; |
||||||
right: 0; |
right: 0; |
||||||
|
|
||||||
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
background-image: -moz-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||||
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
background-image: -webkit-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||||
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
background-image: -o-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||||
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
background-image: -ms-radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||||
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
background-image: radial-gradient(center center, ellipse closest-side, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0) 100%); |
||||||
} |
} |
||||||
|
|
||||||
#parameters { |
#parameters { |
||||||
display:none; |
display:none; |
||||||
padding: 10px 20px; |
padding: 10px 20px; |
||||||
background: url("images/parameters-bg.png"); |
background: url("images/parameters-bg.png"); |
||||||
|
|
||||||
-webkit-border-radius: 4px 4px 0 0; |
-webkit-border-radius: 4px 4px 0 0; |
||||||
-moz-border-radius: 4px 4px 0 0; |
-moz-border-radius: 4px 4px 0 0; |
||||||
-mz-border-radius: 4px 4px 0 0; |
-mz-border-radius: 4px 4px 0 0; |
||||||
border-radius: 4px 4px 0 0; |
border-radius: 4px 4px 0 0; |
||||||
} |
} |
||||||
|
|
||||||
#parameters label { |
#parameters label { |
||||||
font-style: italic; |
font-style: italic; |
||||||
} |
} |
||||||
|
|
||||||
#parameters label > select, #parameters label > input{ |
#parameters label > select, #parameters label > input{ |
||||||
margin-left: 10px; |
margin-left: 10px; |
||||||
} |
} |
||||||
|
|
||||||
#parameters > div.inline { |
#parameters > div.inline { |
||||||
display: inline-block; |
display: inline-block; |
||||||
} |
} |
||||||
|
|
||||||
#parameters > div.inline+div.inline { |
#parameters > div.inline+div.inline { |
||||||
margin-left: 20px; |
margin-left: 20px; |
||||||
} |
} |
||||||
|
|
||||||
#parameters input[type=text], |
#parameters input[type=text], |
||||||
#parameters input[type=number] { |
#parameters input[type=number] { |
||||||
height: 26px; |
height: 26px; |
||||||
border: 1px solid #BBB; |
border: 1px solid #BBB; |
||||||
background-color: #FFF; |
background-color: #FFF; |
||||||
|
|
||||||
padding: 0 4px; |
padding: 0 4px; |
||||||
|
|
||||||
-webkit-border-radius: 4px; |
-webkit-border-radius: 4px; |
||||||
-moz-border-radius: 4px; |
-moz-border-radius: 4px; |
||||||
-ms-border-radius: 4px; |
-ms-border-radius: 4px; |
||||||
border-radius: 4px; |
border-radius: 4px; |
||||||
|
|
||||||
-webkit-box-shadow: 0 1px 0 #FFF; |
-webkit-box-shadow: 0 1px 0 #FFF; |
||||||
-moz-box-shadow: 0 1px 0 #FFF; |
-moz-box-shadow: 0 1px 0 #FFF; |
||||||
-ms-box-shadow: 0 1px 0 #FFF; |
-ms-box-shadow: 0 1px 0 #FFF; |
||||||
box-shadow: 0 1px 0 #FFF; |
box-shadow: 0 1px 0 #FFF; |
||||||
} |
} |
||||||
|
|
||||||
#parameters input.tiny { |
#parameters input.tiny { |
||||||
width: 40px; |
width: 40px; |
||||||
} |
} |
||||||
|
|
||||||
#parameters input.small { |
#parameters input.small { |
||||||
width: 80px; |
width: 80px; |
||||||
} |
} |
||||||
|
|
||||||
#parameters input.medium { |
#parameters input.medium { |
||||||
width: 120px; |
width: 120px; |
||||||
} |
} |
||||||
|
|
||||||
#parameters input.long { |
#parameters input.long { |
||||||
width: 160px; |
width: 160px; |
||||||
} |
} |
||||||
|
|
||||||
#scene { |
#scene { |
||||||
padding: 20px; |
padding: 20px; |
||||||
} |
} |
||||||
|
|
||||||
#scene > * { |
#scene > * { |
||||||
margin: 0 auto; |
margin: 0 auto; |
||||||
} |
} |
||||||
.onEdit #scene { |
.onEdit #scene { |
||||||
} |
} |
||||||
|
|
||||||
.onEdit #parameters { |
.onEdit #parameters { |
||||||
display: block; |
display: block; |
||||||
} |
} |
||||||
|
|
||||||
/* |
/* |
||||||
.card-container { |
.card-container { |
||||||
-webkit-perspective: 600px; |
-webkit-perspective: 600px; |
||||||
width:100%; |
width:100%; |
||||||
height: 100%; |
height: 100%; |
||||||
} |
} |
||||||
.card { |
.card { |
||||||
position: relative; |
position: relative; |
||||||
width:100%; |
width:100%; |
||||||
height: 100%; |
height: 100%; |
||||||
} |
} |
||||||
.card > div { |
.card > div { |
||||||
position: absolute; |
position: absolute; |
||||||
width:100%; |
width:100%; |
||||||
height: 100%; |
height: 100%; |
||||||
-webkit-transform-style: preserve-3d; |
-webkit-transform-style: preserve-3d; |
||||||
-webkit-transition: all .5s ease-in-out; |
-webkit-transition: all .5s ease-in-out; |
||||||
-webkit-backface-visibility: hidden; |
-webkit-backface-visibility: hidden; |
||||||
} |
} |
||||||
.card > div:first-child { |
.card > div:first-child { |
||||||
-webkit-transform: rotateY( 0deg ); |
-webkit-transform: rotateY( 0deg ); |
||||||
} |
} |
||||||
.card > div:last-child { |
.card > div:last-child { |
||||||
-webkit-transform: rotateY( -180deg ); |
-webkit-transform: rotateY( -180deg ); |
||||||
} |
} |
||||||
.card.flip > div:first-child { |
.card.flip > div:first-child { |
||||||
-webkit-transform: rotateY( 180deg ); |
-webkit-transform: rotateY( 180deg ); |
||||||
} |
} |
||||||
.card.flip > div:last-child { |
.card.flip > div:last-child { |
||||||
-webkit-transform: rotateY( 0deg ); |
-webkit-transform: rotateY( 0deg ); |
||||||
} |
} |
||||||
*/ |
*/ |
Loading…
Reference in new issue