Files
mempool/frontend/src/app/components/blockchain/blockchain.component.scss

116 lines
2.0 KiB
SCSS
Raw Normal View History

2019-07-21 17:59:47 +03:00
#divider {
2022-08-29 19:02:22 +02:00
width: 2px;
height: 200px;
2019-07-21 17:59:47 +03:00
left: 0;
top: -50px;
2019-07-21 17:59:47 +03:00
position: absolute;
margin-bottom: 120px;
}
#divider > img {
position: absolute;
left: -100px;
top: -28px;
}
.blockchain-wrapper {
2024-07-10 01:44:15 +09:00
height: 260px;
2022-09-29 22:45:40 +00:00
-webkit-user-select: none; /* Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE10+/Edge */
user-select: none; /* Standard */
2019-07-21 17:59:47 +03:00
}
.position-container {
position: absolute;
2022-09-29 22:45:40 +00:00
left: 0;
2020-02-24 03:42:29 +07:00
top: 75px;
2023-09-20 03:07:35 +00:00
transform: translateX(1280px);
2019-07-21 17:59:47 +03:00
}
.black-background {
2024-04-04 15:36:24 +09:00
background-color: var(--active-bg);
2019-07-21 17:59:47 +03:00
z-index: 100;
position: relative;
}
2020-02-17 20:39:20 +07:00
.scroll-spacer {
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 1px;
pointer-events: none;
}
2020-02-17 20:39:20 +07:00
.loading-block {
position: absolute;
text-align: center;
margin: auto;
2020-02-23 19:16:50 +07:00
width: 300px;
left: -150px;
top: 0px;
2022-09-29 22:45:40 +00:00
}
.time-toggle {
2024-04-23 18:59:26 +02:00
color: var(--fg);
2022-10-06 20:33:54 +04:00
font-size: 0.8rem;
2022-09-29 22:45:40 +00:00
position: absolute;
bottom: -2.2em;
2022-09-29 22:45:40 +00:00
left: 1px;
transform: translateX(-50%);
background: none;
border: none;
outline: none;
margin: 0;
padding: 0;
}
2024-04-21 14:54:50 +02:00
.block-display-toggle {
2024-04-26 16:59:25 +02:00
color: var(--fg);
2024-04-21 14:54:50 +02:00
font-size: 0.8rem;
position: absolute;
bottom: 16.1em;
2024-04-21 14:54:50 +02:00
left: 1px;
transform: translateX(-50%) rotate(90deg);
background: none;
border: none;
outline: none;
margin: 0;
padding: 0;
}
2022-09-30 00:42:02 +00:00
.blockchain-wrapper.ltr-transition .blocks-wrapper,
.blockchain-wrapper.ltr-transition .position-container,
2024-04-21 14:54:50 +02:00
.blockchain-wrapper.ltr-transition .time-toggle,
.blockchain-wrapper.ltr-transition .block-display-toggle {
2022-09-29 22:45:40 +00:00
transition: transform 1s;
}
.blockchain-wrapper.time-ltr {
.blocks-wrapper {
transform: scaleX(-1);
}
.time-toggle {
transform: translateX(-50%) scaleX(-1);
}
2024-04-21 14:54:50 +02:00
.block-display-toggle {
transform: translateX(-50%) scaleX(-1) rotate(90deg);
}
}
:host-context(.ltr-layout) {
.blockchain-wrapper.time-ltr .blocks-wrapper,
.blockchain-wrapper .blocks-wrapper {
direction: ltr;
}
2022-09-29 22:45:40 +00:00
}
:host-context(.rtl-layout) {
.blockchain-wrapper.time-ltr .blocks-wrapper,
.blockchain-wrapper .blocks-wrapper {
direction: rtl;
}
}