u
This commit is contained in:
@@ -6,15 +6,15 @@
|
|||||||
border: 1px solid #e0e0e0;
|
border: 1px solid #e0e0e0;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
background: #fafafa;
|
background: #fafafa;
|
||||||
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-tree {
|
.org-tree {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
min-width: 1200px;
|
|
||||||
min-height: 800px;
|
|
||||||
padding: 20px;
|
padding: 20px;
|
||||||
|
position: absolute;
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-node {
|
.org-node {
|
||||||
@@ -44,10 +44,10 @@
|
|||||||
transition: all 0.3s ease;
|
transition: all 0.3s ease;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-card:hover {
|
.node-card:hover {
|
||||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
|
||||||
border-color: #e0e0e0;
|
border-color: #e0e0e0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-avatar {
|
.node-avatar {
|
||||||
position: relative;
|
position: relative;
|
||||||
@@ -74,10 +74,10 @@
|
|||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.expand-btn:hover {
|
.expand-btn:hover {
|
||||||
background: #026a9e;
|
background: #026a9e;
|
||||||
transform: translateX(-50%) scale(1.1);
|
transform: translateX(-50%) scale(1.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-info {
|
.node-info {
|
||||||
text-align: center;
|
text-align: center;
|
||||||
@@ -94,9 +94,9 @@
|
|||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-amounts > div {
|
.node-amounts > div {
|
||||||
margin-bottom: 4px;
|
margin-bottom: 4px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.personal-amount {
|
.personal-amount {
|
||||||
color: #0380C0;
|
color: #0380C0;
|
||||||
@@ -132,27 +132,27 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-level::before {
|
.org-level::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -40px;
|
top: -40px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-level::after {
|
.org-level::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-sublevel {
|
.org-sublevel {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -162,27 +162,27 @@
|
|||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-sublevel::before {
|
.org-sublevel::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -20px;
|
top: -20px;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 20px;
|
height: 20px;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
}
|
}
|
||||||
|
|
||||||
.org-sublevel::after {
|
.org-sublevel::after {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: #ddd;
|
background: #ddd;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive adjustments */
|
/* Responsive adjustments */
|
||||||
@media (max-width: 768px) {
|
@media (max-width: 768px) {
|
||||||
@@ -228,6 +228,7 @@
|
|||||||
opacity: 0;
|
opacity: 0;
|
||||||
transform: translateY(-10px);
|
transform: translateY(-10px);
|
||||||
}
|
}
|
||||||
|
|
||||||
to {
|
to {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
transform: translateY(0);
|
transform: translateY(0);
|
||||||
@@ -249,4 +250,4 @@
|
|||||||
|
|
||||||
.expand-btn:active {
|
.expand-btn:active {
|
||||||
transform: translateX(-50%) scale(0.95);
|
transform: translateX(-50%) scale(0.95);
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -36,6 +36,10 @@
|
|||||||
.org-node {
|
.org-node {
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 0px 15px 20px 15px;
|
margin: 0px 15px 20px 15px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
min-width: 200px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.node-connector {
|
.node-connector {
|
||||||
|
|||||||
Reference in New Issue
Block a user