1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071 |
- canvas#corpus-map {
- position: absolute;
- -webkit-box-sizing: border-box;
- box-sizing: border-box;
- top: 0;
- left: 0;
- z-index: 0; }
- canvas#corpus-map.de-activated {
- background-color: #f4f4f4; }
- div.node-popup {
- z-index: 10;
- position: absolute;
- -webkit-box-sizing: content-box;
- box-sizing: content-box;
- width: 300px;
- min-height: 30px;
- pointer-events: none;
- top: 60%;
- left: 30%;
- pointer-events: none; }
- div.node-popup .inner {
- padding: 1em;
- outline: 1px solid red;
- background-color: white; }
- div.node-popup:before {
- content: "";
- position: absolute;
- width: 60px;
- height: 0;
- border-top: 1px solid red; }
- div.node-popup[pos="bottom-right"] {
- -webkit-transform: translateY(42px) translateX(42px);
- transform: translateY(42px) translateX(42px); }
- div.node-popup[pos="bottom-right"]:before {
- top: -1px;
- left: -61px;
- -webkit-transform-origin: bottom right;
- transform-origin: bottom right;
- -webkit-transform: rotateZ(45deg);
- transform: rotateZ(45deg); }
- div.node-popup[pos="bottom-left"] {
- -webkit-transform: translateX(-100%) translateY(42px) translateX(-42px);
- transform: translateX(-100%) translateY(42px) translateX(-42px); }
- div.node-popup[pos="bottom-left"]:before {
- top: calc(100% +1px);
- left: 100%;
- -webkit-transform-origin: top left;
- transform-origin: top left;
- -webkit-transform: rotateZ(-45deg);
- transform: rotateZ(-45deg); }
- div.node-popup[pos="top-left"] {
- -webkit-transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px);
- transform: translateY(-100%) translateX(-100%) translateY(-42px) translateX(-42px); }
- div.node-popup[pos="top-left"]:before {
- bottom: 0;
- left: 100%;
- -webkit-transform-origin: top left;
- transform-origin: top left;
- -webkit-transform: rotateZ(45deg);
- transform: rotateZ(45deg); }
- div.node-popup[pos="top-right"] {
- -webkit-transform: translateY(-100%) translateY(-42px) translateX(42px);
- transform: translateY(-100%) translateY(-42px) translateX(42px); }
- div.node-popup[pos="top-right"]:before {
- top: calc(100% + 1px);
- left: -61px;
- -webkit-transform-origin: top right;
- transform-origin: top right;
- -webkit-transform: rotateZ(-45deg);
- transform: rotateZ(-45deg); }
|