2022-06-14 00:33:48 +00:00
|
|
|
.block-overview-graph {
|
2022-05-30 21:53:39 +00:00
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
|
|
|
padding-bottom: 100%;
|
2024-04-04 15:36:24 +09:00
|
|
|
background: var(--stat-box-bg);
|
2022-05-31 22:25:09 +00:00
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
2023-04-02 06:54:42 +09:00
|
|
|
grid-column: 1/-1;
|
2024-02-09 18:01:25 +00:00
|
|
|
|
|
|
|
.placeholder {
|
|
|
|
display: flex;
|
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
height: 100%;
|
|
|
|
width: 100%;
|
|
|
|
align-items: center;
|
|
|
|
justify-content: center;
|
|
|
|
}
|
2022-05-30 21:53:39 +00:00
|
|
|
}
|
|
|
|
|
2024-03-27 02:46:29 +00:00
|
|
|
.graph-alignment {
|
2023-04-02 06:54:42 +09:00
|
|
|
position: relative;
|
|
|
|
width: 100%;
|
2024-03-27 02:46:29 +00:00
|
|
|
}
|
|
|
|
|
|
|
|
.grid-align {
|
2023-04-02 06:54:42 +09:00
|
|
|
display: grid;
|
|
|
|
grid-template-columns: repeat(auto-fit, 75px);
|
|
|
|
justify-content: center;
|
|
|
|
}
|
2022-06-14 00:33:48 +00:00
|
|
|
|
|
|
|
.block-overview-canvas {
|
2022-05-30 21:53:39 +00:00
|
|
|
position: absolute;
|
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
2022-06-14 00:33:48 +00:00
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
2022-05-30 21:53:39 +00:00
|
|
|
overflow: hidden;
|
2022-06-15 01:40:05 +00:00
|
|
|
|
|
|
|
&.clickable {
|
|
|
|
cursor: pointer;
|
|
|
|
}
|
2022-05-30 21:53:39 +00:00
|
|
|
}
|
2022-05-31 22:25:09 +00:00
|
|
|
|
|
|
|
.loader-wrapper {
|
|
|
|
position: absolute;
|
2022-06-22 19:08:16 +00:00
|
|
|
background: #181b2d7f;
|
2022-05-31 22:25:09 +00:00
|
|
|
left: 0;
|
|
|
|
right: 0;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
|
|
align-items: center;
|
|
|
|
transition: opacity 500ms 500ms;
|
2022-06-14 00:33:48 +00:00
|
|
|
pointer-events: none;
|
2022-05-31 22:25:09 +00:00
|
|
|
|
|
|
|
&.hidden {
|
|
|
|
opacity: 0;
|
|
|
|
}
|
|
|
|
}
|