.NEO {
margin:0;
line-height:18px;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
touch-callout: none;
-webkit-touch-callout: none;
}
.NEO *:active,
.NEO *:hover {
cursor: default;
}
.NEO #container{
width: 100%;
height: 100%;
position: relative;
border: 1px dotted transparent;
}
.NEO #center{
display: table;
position: relative;
height: 100%;
margin: auto;
}
.NEO #toolsWrapper{
width: 52px;
display: table;
position:absolute;
top: 0;
right: -3px;
}
.NEO #tools{
width: 52px;
display: table-cell;
vertical-align: middle;
position: relative;
}
.NEO #painterContainer{
display:table-cell;
vertical-align: middle;
position: relative;
}
.NEO #painterWrapper{
padding: 0 55px 0 0;
position: relative;
float:right; /* なぜかChrome55でずれるので対策 */
}
.NEO #upper {
height:30px;
padding-right: 20px;
text-align:right;
}
.NEO #lower {
height:30px;
}
.NEO #painter {
position: relative;
padding: 20px 20px 20px 20px;
}
.NEO #canvas {
position: relative;
width: 300px;
height: 300px;
background-color: white;
}
.NEO #headerButtons {
position: absolute;
top: 5px;
left: 5px;
}
.NEO #footerButtons {
position: absolute;
bottom: 5px;
left: 5px;
}
/*
-----------------------
Modal Window
-----------------------
*/
.NEO #pageView{
background-color: white;
}
.NEO #windowView{
z-index: 9999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: white;
}
/*
-----------------------
Controls
-----------------------
*/
.NEO #zoomMinus {
padding: 0;
margin: 0;
width:16px;
height:16px;
margin-left:1px;
}
.NEO #zoomPlus {
padding: 0;
margin: 0;
width:16px;
height:16px;
}
.NEO #zoomMinusWrapper {
position: absolute;
right: -20px;
bottom: -21px;
width: 19px;
height: 19px;
text-align:center;
}
.NEO #zoomPlusWrapper {
position: absolute;
left: -21px;
bottom: -21px;
width: 19px;
height: 19px;
text-overflow: hidden;
text-align:center;
}
.NEO #scrollH {
position: absolute;
left: 1px;
bottom: -20px;
width: calc(100% - 2px);
height: 18px;
}
.NEO #scrollV {
position: absolute;
right: -20px;
top: 1px;
width: 18px;
height: calc(100% - 2px);
}
.NEO #scrollH div {
position: absolute;
width: 50px;
height: 16px;
}
.NEO #scrollV div {
position: absolute;
width: 16px;
height: 50px;
}
.NEO #scrollH div:hover {}
.NEO #scrollV div:hover {}
.NEO #neoWarning {
position: absolute;
left: 5px;
top: 5px;
color: red;
pointer-events: none;
text-align: left;
transition: all 2s;
}
/*
-----------------------
Widgets
-----------------------
*/
.NEO .buttonOff {
display: inline-block;
border: 1px solid white;
height: 19px;
padding: 3px;
height: 16px;
font-size: 15px;
font-weight: 100;
font-family: 'Arial';
letter-spacing: 0;
margin-right: 4px;
border-left: 1px solid rgba(0, 0, 0, 0);
border-top: 1px solid rgba(0, 0, 0, 0);
border-right: 1px solid rgba(0, 0, 0, 0);
border-bottom: 1px solid rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
margin: 1px;
}
.NEO .buttonOff:hover {}
.NEO .buttonOff:active,
.NEO .buttonOn {
display: inline-block;
height: 19px;
padding: 3px;
height: 16px;
font-size: 15px;
font-weight: 100;
font-family: 'Arial';
letter-spacing: 0;
margin-right: 4px;
border-right: 1px solid rgba(0, 0, 0, 0);
border-bottom: 1px solid rgba(0, 0, 0, 0);
-webkit-font-smoothing: antialiased;
font-smoothing: antialiased;
margin: 1px;
}
.NEO .toolTipOff,
.NEO .toolTipFixed {
position:relative;
padding: 0;
margin: 0;
margin-top: 3px;
margin-bottom: 3px;
width: 46px;
height: 18px;
border-top: 1px solid #ffffff;
border-left: 1px solid #ffffff;
border-right: 1px solid #9397b2;
border-bottom: 1px solid #9397b2;
}
.NEO .toolTipOn {
position:relative;
padding: 0;
margin: 0;
margin-top: 3px;
margin-bottom: 3px;
width: 46px;
height: 18px;
border-top: 1px solid rgba(0, 0, 0, 0);
border-left: 1px solid rgba(0, 0, 0, 0);
border-right: 1px solid #ffffff;
border-bottom: 1px solid #ffffff;
}
.NEO .toolTipOff canvas,
.NEO .toolTipOn canvas,
.NEO .toolTipFixed canvas {
position: absolute;
top: 0;
left: 0;
}
.NEO .toolTipOff .label,
.NEO .toolTipOn .label,
.NEO .toolTipFixed .label {
position: absolute;
bottom: -4px;
left: 1px;
font-size:12px;
font-weight: 100;
font-family: 'Arial';
letter-spacing: -1px;
}
.NEO .colorTips {
position:relative;
width: 48px;
height: 144px;
padding: 0;
margin: 0;
margin-top: 4px;
margin-left: 0px;
}
.NEO .colorTipOff {
position: absolute;
overflow: hidden;
width: 22px;
height: 18px;
margin: -1px 4px 0px 0px;
padding: 0;
}
.NEO .colorTipOff img {
left: 0;
opacity: 0.5;
position: absolute;
pointer-events:none;
}
.NEO .colorTipOn {
position: absolute;
overflow: hidden;
width: 22px;
height: 18px;
margin: -1px 4px 0px 0px;
padding: 0;
}
.NEO .colorTipOn img {
left: -22px;
opacity: 0.5;
position: absolute;
pointer-events:none;
}
.NEO .colorSlider {
width: 48px;
height:13px;
position: relative;
margin-top: 3px;
}
.NEO .colorSlider .label {
pointer-events: none;
position: absolute;
left: 2px;
bottom: -3px;
font-size:12px;
font-weight: 100;
font-family: 'Arial';
letter-spacing: 0;
vertical-align: middle;
}
.NEO .colorSlider .slider {
position: absolute;
height: 100%;
left: 0px;
width: 50%;
background-color: #fa9696;
box-shadow: -1px 0 0 0px rgba(0, 0, 0, 0.3) inset;
}
.NEO .colorSlider .hit {
position:absolute;
width: 60px;
height: 13px;
left: -6px;
background-color: white;
opacity: 0.01;
}
.NEO .sizeSlider {
width: 48px;
height:33px;
position: relative;
margin-top: 4px;
}
.NEO .sizeSlider .label {
pointer-events: none;
position: absolute;
left: 2px;
bottom: -3px;
font-size:12px;
font-weight: 100;
font-family: 'Arial';
letter-spacing: 0;
vertical-align: middle;
}
.NEO .sizeSlider .slider {
position: absolute;
width: 100%;
top: 0px;
height: 33%;
background-color: #82f238;
box-shadow: 0 -1px 0 0px rgba(0, 0, 0, 0.3) inset;
}
.NEO .sizeSlider .hit {
position:absolute;
width: 48px;
height: 41px;
top: -4px;
background-color: white;
opacity: 0.01;
}
.NEO .reserveControl {
width: 48px;
height: 13px;
position: relative;
}
.NEO .reserveControl .reserve {
position: absolute;
width: 11px;
height: 8px;
background-color: white;
}
.NEO .layerControl {
width: 48px;
height: 20px;
position: relative;
margin-top: 6px;
}
.NEO .layerControl .bg {
position: absolute;
width: 44px;
height: 9px;
margin: 0;
top: 0px;
left: 2px;
}
.NEO .layerControl .line1 {
position: absolute;
width: 50px;
height:10px;
margin: 0;
padding: 0;
top: 0px;
left: -1px;
background-image: linear-gradient(to top right, transparent, transparent 47%, red 47%, red 53%, transparent 53%, transparent);
}
.NEO .layerControl .line0 {
position: absolute;
width: 50px;
height: 10px;
margin: 0;
padding: 0;
top: 10px;
left: -1px;
background-image: linear-gradient(to top right, transparent, transparent 47%, red 47%, red 53%, transparent 53%, transparent);
}
.NEO .layerControl .label1 {
position: absolute;
left: 2px;
Top: -4px;
font-size:11px;
font-weight: 100;
font-family: 'Arial';
letter-spacing: 0;
vertical-align: baseline;
}
.NEO .layerControl .label0 {
position: absolute;
left: 2px;
Top: 6px;
font-size:11px;
font-weight: 100;
font-family: 'Arial';
letter-spacing: 0;
vertical-align: baseline;
}
/*
-----------------------
InputText
-----------------------
*/
.NEO .inputText {
z-index: 100000;
position: absolute;
text-align: left;
white-space: nowrap;
color: #0000ff;
font-family: 'Arial';
padding: 1px 5px 1px 5px;
font-size: 32px;
line-height: 40px;
height: 40px;
min-width: 10em;
bottom: 0px;
left: 250px;
border: 1px solid #aaa;
background-color: white;
}
*[contenteditable] {
user-select: auto !important;
-webkit-user-select: auto !important;
-moz-user-select: auto !important;
}
#testtext {
user-select: auto !important;
-webkit-user-select: auto !important;
-moz-user-select: auto;
}
[contenteditable="true"]:focus {
outline: 1px solid #b1d6fd;
border: 1px solid #b1d6fd;
}
