sbot/ui/less/com/contact-summary.less

134 lines
2.2 KiB
Plaintext

.contact-summary {
margin: 5px 10px;
display: inline-block;
vertical-align: top;
h2, p {
margin: 0;
}
.section {
margin-bottom: 24px;
}
li {
display: inline-block;
margin-right: 1em;
}
.title {
width: 275px;
text-align: center;
margin: 15px 0 10px;
h2 {
font-weight: bold;
}
h3 {
margin: 1px 0 0;
font-size: 21px;
.user-link {
color: inherit;
}
}
}
.profpic {
position: relative;
display: inline-block;
.hexagon-275 {
z-index: 10;
}
.hexTop, .hexBottom {
outline: 5px solid #eee;
}
}
.totem {
position: relative;
width: 275px;
height: 318px;
.corner {
position: absolute;
z-index: 5;
display: block;
width: 130px;
height: 100px;
background: #282C32;
color: #2778E2;
border-radius: 2px;
font-family: @font-family-monospace;
font-size: 21px;
.corner-inner {
position: absolute;
}
&:hover:after {
content: attr(data-overlay);
position: absolute;
background: inherit;
border-radius: 2px;
width: 100%;
font-family: @font-family-sans-serif;
font-size: 15px;
}
}
.topleft {
top: 10px;
left: 10px;
.corner-inner {
left: 9px;
top: 4px;
}
&:hover:after {
top: 0;
left: 0;
padding: 4px 6px 50px;
}
}
.topright {
top: 10px;
right: 10px;
.corner-inner {
right: 11px;
top: 4px;
}
}
.botleft {
bottom: 10px;
left: 10px;
.corner-inner {
left: 9px;
top: 68px;
}
&:hover:after {
bottom: 0;
left: 0;
padding: 50px 6px 4px;
}
}
.botright {
bottom: 10px;
right: 10px;
.corner-inner {
right: 11px;
top: 68px;
}
&:hover:after {
bottom: 0;
right: 0;
padding: 50px 6px 4px;
text-align: right;
}
}
.glyphicon {
font-size: 12px;
margin: 0 3px;
}
}
.relations {
margin: 0 0 0 10px;
.user-hexagon {
opacity: 1;
}
}
}