File size: 2,396 Bytes
a67ae61
 
d6b8d19
 
a67ae61
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
d6b8d19
 
 
 
 
 
 
 
 
 
a67ae61
 
 
 
 
 
 
8ed5f8a
fd5f45b
 
d6b8d19
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
abe9a93
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
/* define some variables */
:root {
    --cl_Neon_Green: #ecff80;
    --shiny_White: #fffdfa; 
  } 


/* tell that a tranformation shall be performed with a duration of 0.3 seconds and style easei-in */
.figure{
    transition: transform .3s ease-in;

    /* let also the margins be applied as an animation */
    transition: margin .3s ease-in;
}

/* here the actual transformation is performed  */
.figure:hover{
    transform: scale(1.3);
    z-index: 999;
    margin: 87px;
    position: relative;
}

/* figure for which it is not desired to have any animation is called fig_Exclude*/
#fig_Exclude{
    /* your style rules for all figures except the one with id "exclude" */
    z-index: 999;
    display: grid; 
    align-items: center;
    justify-content: center;

  }

/* .modebar-btn{
    visibility: hidden;
} */

/* plotly logo  */
.modebar-btn--logo{
    visibility: hidden;
}


/* --------------------------- popper_Tooltip_Gen --------------------------- */
#popper_Tooltip_Gen {
    background: #333;
    color: var(--shiny_White);
    font-weight: bold;
    padding: 0.2rem 0.4rem;
    font-size: 0.8rem;
    border-radius: 0.4rem;
    display: none;
  }

#popper_Tooltip_Gen[data-show] {
    display: block;
  }

#pop_Arrow_Gen,
#pop_Arrow_Gen::before {
    position: absolute;
    width: 0.5rem;
    height: 0.5rem;
    background: inherit;
  }

#pop_Arrow_Gen {
    visibility: hidden;
  }

#pop_Arrow_Gen::before {
    visibility: visible;
    content: '';
    transform: rotate(45deg);
  }

#popper_Tooltip_Gen[data-popper-placement^='top'] > #pop_Arrow_Gen {
    bottom: -0.25rem;
  }

#popper_Tooltip_Gen[data-popper-placement^='bottom'] > #pop_Arrow_Gen {
    top: -0.25rem;
  }

#popper_Tooltip_Gen[data-popper-placement^='left'] > #pop_Arrow_Gen {
    right: -0.25rem;
  }

#popper_Tooltip_Gen[data-popper-placement^='right'] > #pop_Arrow_Gen {
    left: -0.25rem;
  }

/* the feedback <Button> above the right bar */
#feedback_Button{
  border: none;

}

/* the feedback <a> above the right bar */
#feedback_A{
  display: grid;
  border-radius: 1rem;
  font-weight: bold;
  text-decoration: none;
  font-size: 1.1rem;

  grid-template-columns: auto auto;
  grid-gap: 0.77rem; /* Adjust this value to add more or less spacing between the SVG and the link text */

  /* algin all grid items */
  justify-items: center;
}


.custom-color{
  color: var(--cl_Neon_Green);
}