css independence

[ghost]

Is it possible to move css of moveable to a separate file independently?
For example, when operating with a smartphone, the pointer is too small to catch well.
I would like to adjust such things with an independent css file.

[daybrush]

If you want to custom CSS, use !important.

.moveable-control {
	width: 20px!important;
	height: 20px!important;
	margin-top: -10px!important;
        margin-left: -10px!important;
}

The default css is as follows:

.rCSckyn7i {
	position: fixed;
	width: 0;
	height: 0;
	left: 0;
	top: 0;
	z-index: 3000;
}
.rCSckyn7i .moveable-control-box{
    z-index: 0;
}
.rCSckyn7i .moveable-line, .rCSckyn7i .moveable-control{
	left: 0;
	top: 0;
}
.rCSckyn7i .moveable-control{
	position: absolute;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 2px solid #fff;
	box-sizing: border-box;
	background: #4af;
	margin-top: -7px;
    margin-left: -7px;
    z-index: 10;
}
.rCSckyn7i .moveable-line{
	position: absolute;
	width: 1px;
	height: 1px;
	background: #4af;
	transform-origin: 0px 0.5px;
}
.rCSckyn7i .moveable-line.moveable-rotation-line{
	height: 40px;
	width: 1px;
	transform-origin: 0.5px 39.5px;
}
.rCSckyn7i .moveable-line.moveable-rotation-line .moveable-control{
	border-color: #4af;
	background:#fff;
	cursor: alias;
}
.rCSckyn7i .moveable-control.moveable-origin{
	border-color: #f55;
	background: #fff;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	margin-left: -6px;
	pointer-events: none;
}
.rCSckyn7i .moveable-direction.moveable-e, .rCSckyn7i .moveable-direction.moveable-w{
	cursor: ew-resize;
}
.rCSckyn7i .moveable-direction.moveable-s, .rCSckyn7i .moveable-direction.moveable-n{
	cursor: ns-resize;
}
.rCSckyn7i .moveable-direction.moveable-nw, .rCSckyn7i .moveable-direction.moveable-se, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-ne, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-sw{
	cursor: nwse-resize;
}
.rCSckyn7i .moveable-direction.moveable-ne, .rCSckyn7i .moveable-direction.moveable-sw, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-nw, .rCSckyn7i.moveable-reverse .moveable-direction.moveable-se{
	cursor: nesw-resize;
}
.rCSckyn7i .moveable-group{
    z-index: -1;
}

[daybrush]

@comiewcom

See the following link:
https://github.com/daybrush/moveable/blob/master/custom_css.md

[jstebenne]

I feel like using !important is not a good solution. Sure it works but I think it should be used as a last resort since it overrides normal CSS cascading priority.

[daybrush]

@TheBird956
You are right

However, because CSS of styled-component has high priority, you should use selector with higher priority than styled-component. The name of the scope can change from version to version, so the easiest way is ! important.

However, in the next version, i will provide the option to set custom CSS initially with options (props).

Thank you :)