PathwayMap:PathwayEditor.css

/* mdpe basic css*/ div.mdpe { user-select:none; -webkit-user-select:none; -ms-user-select: none; -moz-user-select:none; -khtml-user-select:none; position:relative ; box-sizing:border-box; } div.mdpe svg { position:absolute ; width:100% ; height:100% ; z-index:4 ; pointer-events: none; } div.mdpe .box { position:absolute ;

   color:#08233E;

background-color:white;/* rgb(243, 255, 228);*/ line-height:100% ; box-sizing:border-box; cursor:move;

   font-family: 'Helvetica';
   border-radius:0.2em;
   padding-top:0.25em;
   padding-bottom:0.25em;
   padding-left:0.5em;
   padding-right:0.5em;
   box-shadow: 1px 1px 2px rgba(0,0,0,0.5);
   z-index: 3;

} div.mdpe .label {

   position:absolute;
   font-size:0.8em;
   z-index:5;
   box-sizing: border-box;
   border-radius:0.5em;
   padding-top:0.25em;
   padding-bottom:0.25em;
   padding-left:0.5em;
   padding-right:0.5em;
   background-color: #FFE0B2;
   font-family: 'Helvetica';
   border:1px solid #E65100;
   color:#1A237E;
   box-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);

}

div.mdpe .gene {

   font-size:0.8em;
   z-index:5;
   text-align:left;
   line-height:normal;
   border-radius:0.5em;
   padding-top:0.25em;
   padding-bottom:0.25em;
   padding-left:0.5em;
   padding-right:0.5em;
   background-color: #FFE0B2;
   border:1px solid #E65100;
   color:#1A237E;
   box-shadow: 0.5px 0.5px 1px rgba(0,0,0,0.5);

}

div.mdpe .rectangle{

   background: rgba(255, 166, 166, 0.38);
   border: 1px solid red;
   position: absolute;

}

div.mdpe .active{

   border-color:red;
   box-shadow: 3px 3px 5px #ff0000;

}

div.mdpe a { /* text-transform: uppercase;*/

 color:blueviolet;
 text-decoration: none;
 position: relative;
 border-bottom: solid 1px blueviolet;
 overflow:hidden;

}

div.mdpe a:hover {

 color: #054176;

}

div.mdpe a:before {

 content: ;
 border-bottom: solid 1px #054176;
 position: absolute;
 bottom: 0; left: 0;
 width: 100%;
 opacity: 0;

}

div.mdpe a:hover:before {

 opacity: 1.0;

}

div.mdpe a, div.mdpe a:before {

 -webkit-transition: all 0.2s ease;
         transition: all 0.2s ease;

}

div.mdpe div.box { text-align:center ; } div.mdpe table.box { border-collapse: collapse ; margin:0 ;

   border-radius:0.5em;

} div.mdpe table td {

   border-radius:0.5em;
   padding-top:0.2em;
   padding-bottom:0.2em;
   padding-left:0.5em;
   padding-right:0.5em;
  /* border-top: 2px solid white*/

}

div.mdpe table th { background-color:#0C555D ;/*Bittersweet*/

   color:white;

text-align: center ;

   padding-top:0.5em;
   padding-bottom:0.25em;
   padding-left:0.5em;
   padding-right:0.5em;
   border-top-left-radius: 0.5em;
   border-top-right-radius: 0.5em;

} div.mdpe svg line { stroke:#000 ; stroke-width:2px ; } div.mdpe svg path { stroke:#2c3e50 ;

   stroke-width:1px;

}

figure { margin:0 ; }

/* preset class */ div.mdpe div.trans { background:none ; border:none ;

   box-shadow:None;

} div.mdpe .transB, div.mdpe .transB1{

   z-index: 0;
   background:none ;
   color:none;
   border: 2px solid black;
   box-shadow:none;

}

div.mdpe .transB2{

   z-index: 0;
   background:none ;
   color:none;
   border: 4px solid black;
   box-shadow:none;

}

div.mdpe .mark{

   z-index:10;
   font-size:1px;
   background:none;
   border: 2px solid red;
   box-shadow:none;
   border-radius:500px

}

div.mdpe div.image, div.mdpe div.image2, div.mdpe div.image50, div.mdpe div.image100 div.mdpe div.image200{ background-color:white; padding-left:1em ; padding-right:1em ;

   padding-top:0.3em ;

padding-bottom:0.3em ; }

div.mdpe div.image2 { background-color:white; padding-left:3em ; padding-right:3em ;

   padding-top:0.5em ;

padding-bottom:0.5em ; }

div.mdpe div.image img { max-width:300px ; } div.mdpe div.image50 img{

   max-width:50px;

}

div.mdpe div.image100 img{

   max-width:100px;

}

div.mdpe div.image200 img{

   max-width:200px;

}

/* text/stroke color */ div.mdpe .red { color:red ; stroke:#f00 ; } div.mdpe .blue { color:blue ; stroke:#00f ; } div.mdpe .green { color:blue ; stroke:#0f0 ; } div.mdpe .white { color:white ; stroke:#fff ; } div.mdpe .gray { color:blue ; stroke:#888 ; } /* border color */ div.mdpe .bd_red { border-color:red ; } div.mdpe .bd_blue { border-color:blue ; } } div.mdpe .bd_green { border-color:green ; } /* bg color */ div.mdpe .bg_red { background-color:#fee ; } div.mdpe .bg_blue { background-color:#eef ; } div.mdpe .bg_green { background-color:#efe ; } div.mdpe .bg_g25 { background-color:#444 ; } div.mdpe .bg_g50 { background-color:#888 ; } div.mdpe .bg_g75 { background-color:#ccc ; } div.mdpe .bg_black { background-color:#000 ; } /* line style */ div.mdpe .l_w1 { stroke-width:1px ; } div.mdpe .l_w2 { stroke-width:2px ; } div.mdpe .l_w3 { stroke-width:3px ; } div.mdpe .l_w4 { stroke-width:4px ; } div.mdpe .l_w5 { stroke-width:5px ; } div.mdpe .l_d10 { stroke-dasharray:10px ; }

/* border radius */ div.mdpe .bd_r6 { border-radius:6px ; } div.mdpe .bd_r10 { border-radius:10px ; } div.mdpe .bd_r20 { border-radius:20px ; } div.mdpe .circle4 { width:4em; height:4em ; text-align:center ; padding-top:1em ; border-radius:2em ; }

div.mdpe .triangle { /* 大きさの設定 (borderだけで描くので、widthとheightは0でよい) */

   width: 0px;
   height: 0px;

/* borderをうまく使って三角形を描く (高さ: 45px, 横幅: 28×2=56px) */

   border-bottom: solid 45px black;
   border-left: solid 28px transparent;
   border-right: solid 28px transparent;
   
   padding:0;
   box-shadow: none;
   background-color:inherit;

}

/* alignment */ div.mdpe div.TC,table.TC { text-align:center ; } div.mdpe div.TR,table.TR { text-align:right ; } div.mdpe div.TL,table.TL { text-align:left ; } /* font-style */ div.mdpe .bold { font-weight:bold ; } div.mdpe .FB { font-weight:bold ; } div.mdpe .FI { font-style: italic ; } div.mdpe .FM { font-family:monospace; } /*　font-size */ div.mdpe .F05 { font-size:0.5rem ; } div.mdpe .F08 { font-size:0.8rem ; } div.mdpe .F15 { font-size:1.5rem ; } div.mdpe .F20 { font-size:2.0rem ; } div.mdpe .small1{

   font-size:0.1em;

} div.mdpe .small2{

   font-size:0.2em;

} div.mdpe .small3{

   font-size:0.3em;

} div.mdpe .small4{

   font-size:0.4em;

} div.mdpe .small5{

   font-size:0.5em;

} div.mdpe .small6{

   font-size:0.6em;

} div.mdpe .small7{

   font-size:0.7em;

} div.mdpe .small8{

   font-size:0.8em;

} div.mdpe .small9{

   font-size:0.9em;

} /* paddng */ div.mdpe .P05 { padding:0.5rem ; } div.mdpe .P10 { padding:1rem ; } div.mdpe .P15 { padding:1.5rem ; } div.mdpe .P20 { padding:2rem ; } /* box sizes */ div.mdpe .W05 { width:5rem ; } div.mdpe .W10 { width:10rem ; } div.mdpe .W15 { width:15rem ; } div.mdpe .W20 { width:20rem ; } div.mdpe .H2 { height:2rem ; } div.mdpe .H3 { height:3rem ; } div.mdpe .H4 { height:4rem ; }

.highlight{

   position:relative;
   background-color:yellow;
   color:black;
   line-height: 1;
   padding: 0.5em 1em 0.5em 1em;
   margin: 1em 1em 0em 0em;
   float: right;
   z-index:1;
   box-shadow: 3px 3px 5px black;
   animation: fadeIn 2s ease 0s 1 normal;

}

/* popuo用のツールチップ */ /* ツールチップ部分を隠す */ div.mdpe .box span, div.mdpe .label span{

   display: none;

}

div.mdpe .box:hover, div.mdpe .label:hover{

   user-select: text;
   cursor: auto;
   z-index:20;

}

/* マウスオーバー時にツールチップを表示 */ div.mdpe .box:hover span, div.mdpe .label:hover span{

   user-select: text;
   display: block;                  /* ボックス要素にする */
   position: absolute;            /* relativeからの絶対位置 */
   top:auto;
   font-size: 90%;
   color:#08233E;
   background-color: #E1F5FE;
   width:auto;
   padding-top: 0.3rem;
   padding-bottom: 0.3rem;
   padding-left: 1rem;
   padding-right: 1rem;
   border: 1px solid #0D47A1;
   border-radius:3px;
   z-index: 20;

}

view {

height:100% ; flex-grow:1; display:flex ; flex-direction: column ; background-color:#333333 }

control {

margine:5px;
color:white;

}

vbase {

height:100% ; position:relative ; }

rollbase {

position:absolute ; top:5px ; right:5px; bottom:5px; left:5px; overflow:scroll ; }

base {

display:block ; font-family:sans-serif; background-color:rgb(250, 250, 250) ; transform-origin:0 0 ;

   border-radius: 0.2;

}

zoom{

background-color:inherit; } input,button { font-size:1rem ; } input[type=range] { width:300px ; background-color:#ccc; }

PathwayMap:PathwayEditor.css

Navigation

Tools