Jcblmaster: Jcblmaster moved page PathwayMap:PathwayEditor.css to PathwayMa:PathwayEditor.css

2023-02-03T05:08:09Z

Jcblmaster moved page PathwayMap:PathwayEditor.css to PathwayMa:PathwayEditor.css

← Older revision		Revision as of 14:08, 3 February 2023
(No difference)

Tipputa: Created page with "/* 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-siz..."

2018-04-15T12:54:59Z

Created page with "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-siz..."

New page

/* 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 - Revision history

Jcblmaster: Jcblmaster moved page PathwayMap:PathwayEditor.css to PathwayMa:PathwayEditor.css

Tipputa: Created page with "/* 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-siz..."