471 lines
8.6 KiB
Plaintext
471 lines
8.6 KiB
Plaintext
body.chat-open .user-info-navbar a[data-toggle="chat"] {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
|
|
.user-info-navbar {
|
|
background-color: @userinfo-navbar-background;
|
|
min-height: 0;
|
|
border: 0;
|
|
padding: 0;
|
|
margin: -@main-content-padding;
|
|
margin-bottom: @main-content-padding;
|
|
|
|
.user-info-menu {
|
|
margin: 0;
|
|
|
|
&.left-links {
|
|
float: left;
|
|
}
|
|
|
|
&.right-links {
|
|
float: right;
|
|
}
|
|
|
|
|
|
// Links list
|
|
li {
|
|
line-height: 1;
|
|
|
|
a {
|
|
line-height: 1;
|
|
|
|
img {
|
|
line-height: 1;
|
|
}
|
|
}
|
|
}
|
|
|
|
// Root level
|
|
> li {
|
|
position: relative;
|
|
margin: 0;
|
|
padding: 0;
|
|
border: 1px solid @userinfo-navbar-background;
|
|
border-top: 0;
|
|
border-bottom: 0;
|
|
display: block;
|
|
float: left;
|
|
|
|
&.hover-line {
|
|
|
|
&:before {
|
|
content: '';
|
|
position: absolute;
|
|
display: block;
|
|
height: 2px;
|
|
top: 0px; left: 0; right: 0;
|
|
background: @secondary-color;
|
|
display: none;
|
|
}
|
|
|
|
&:hover:before, &.open:before {
|
|
display: block;
|
|
}
|
|
}
|
|
|
|
> a {
|
|
position: relative;
|
|
display: block;
|
|
padding: @base-margin + 10 @base-padding*2;
|
|
color: @userinfo-link-color;
|
|
border-bottom: 1px solid @userinfo-navbar-background;
|
|
top: 1px;
|
|
z-index: 5;
|
|
&:extend(.transall);
|
|
|
|
i {
|
|
font-size: 15px;
|
|
line-height: 1;
|
|
}
|
|
|
|
&:hover {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
|
|
.badge {
|
|
font-size: 9px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 10px;
|
|
padding: 4px;
|
|
min-width: 18px;
|
|
font-size: 400;
|
|
line-height: 1;
|
|
}
|
|
}
|
|
|
|
> form {
|
|
position: relative;
|
|
display: block;
|
|
padding: @base-margin + 10 @base-padding*2;
|
|
padding-bottom: @base-margin + 6;
|
|
margin: 0;
|
|
border-bottom: 1px solid @userinfo-navbar-background;
|
|
}
|
|
|
|
// Sidebar Collapse
|
|
a[data-toggle="sidebar"] {
|
|
padding-left: @default-padding - 5;
|
|
}
|
|
|
|
// Search field
|
|
&.search-form {
|
|
|
|
.btn {
|
|
position: relative;
|
|
padding: 0;
|
|
margin: 0;
|
|
height: auto;
|
|
color: @userinfo-link-color;
|
|
z-index: 2;
|
|
|
|
&:hover {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
|
|
&:active,
|
|
&:focus {
|
|
.box-shadow(none);
|
|
}
|
|
}
|
|
|
|
.search-field {
|
|
@h: 31px;
|
|
|
|
position: absolute;
|
|
top: 50%;
|
|
right: @base-padding*2 - 5;
|
|
margin-top: -@h/2;
|
|
line-height: 1;
|
|
height: @h;
|
|
border: 1px solid @default-border-color;
|
|
border: 0;
|
|
padding: 0 @base-padding;
|
|
width: 170px;
|
|
padding-right: 30px;
|
|
font-size: @font-size-small;
|
|
z-index: 1;
|
|
visibility: hidden;
|
|
background: lighten(@background-color, 2%);
|
|
.opacity(0);
|
|
.placeholder(@main-text-color);
|
|
|
|
&:focus {
|
|
|
|
+ .btn {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.focused .search-field {
|
|
visibility: visible;
|
|
.opacity(1);
|
|
.transition(~"all 100ms ease-in-out");
|
|
}
|
|
|
|
&.always-visible .search-field {
|
|
visibility: visible;
|
|
.opacity(1);
|
|
}
|
|
}
|
|
|
|
// User Profile
|
|
&.user-profile {
|
|
|
|
> a {
|
|
text-decoration: none;
|
|
|
|
> img {
|
|
position: relative;
|
|
|
|
+ span {
|
|
margin-left: @base-padding/2;
|
|
}
|
|
}
|
|
|
|
span {
|
|
display: inline-block;
|
|
}
|
|
}
|
|
|
|
@s: 32; .userpic-@{s} { margin-top: unit(-@s/2, px) - 1; top: unit(@s/4, px); }
|
|
}
|
|
|
|
// Toggled dropdown
|
|
&.open {
|
|
border-left-color: @default-border-color;
|
|
border-right-color: @default-border-color;
|
|
z-index: 15;
|
|
|
|
> a {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
|
|
// Dropdowns
|
|
.dropdown-menu {
|
|
margin: 0;
|
|
padding: 0;
|
|
margin-top: 0px;
|
|
margin-left: -1px;
|
|
z-index: 3;
|
|
.box-shadow(~"0 2px 8px rgba(0,1,1,.05)");
|
|
|
|
.dropdown-menu-list {
|
|
position: relative;
|
|
max-height: @userinfo-messages-dropdown-height;
|
|
overflow: auto;
|
|
|
|
&.ps-scrollbar {
|
|
overflow: hidden;
|
|
}
|
|
|
|
li {
|
|
position: relative;
|
|
|
|
a {
|
|
position: relative;
|
|
display: block;
|
|
padding: @base-margin @default-padding;
|
|
color: @userinfo-link-color;
|
|
|
|
.line {
|
|
display: block;
|
|
|
|
&.desc {
|
|
margin-top: @base-padding;
|
|
.text-overflow();
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.light {
|
|
.opacity(.6);
|
|
}
|
|
|
|
&.small, .small {
|
|
font-size: @font-size-small;
|
|
}
|
|
|
|
&.time {
|
|
font-size: 11px;
|
|
margin-top: @base-padding/2;
|
|
}
|
|
}
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
height: 1px;
|
|
background: #ededed;
|
|
bottom: 0;
|
|
left: @default-padding;
|
|
right: @default-padding;
|
|
}
|
|
|
|
&:hover {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
|
|
&.active {
|
|
|
|
a {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
> .top {
|
|
padding: @base-margin @default-padding;
|
|
padding-bottom: 0;
|
|
|
|
a {
|
|
color: @userinfo-link-color;
|
|
|
|
&:hover {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
|
|
p {
|
|
margin: 0;
|
|
color: @userinfo-link-color;
|
|
padding-bottom: @base-padding + @base-padding/2;
|
|
border-bottom: 1px solid #ededed;
|
|
}
|
|
}
|
|
|
|
> .external {
|
|
position: relative;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
top: -1px;
|
|
background-color: none;
|
|
height: 1px;
|
|
background-color: #ededed;
|
|
}
|
|
|
|
a {
|
|
display: block;
|
|
padding: @base-margin @default-padding;
|
|
color: @userinfo-link-color;
|
|
background-color: @dropdown-link-hover-bg;
|
|
&:extend(.clearfix all);
|
|
|
|
span {
|
|
float: left;
|
|
}
|
|
|
|
i {
|
|
float: right;
|
|
}
|
|
|
|
&:hover {
|
|
color: @secondary-text-color;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.messages {
|
|
width: @userinfo-messages-dropdown-width;
|
|
|
|
.dropdown-menu-list li {
|
|
|
|
&:after {
|
|
@s: 5px;
|
|
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
background-color: #cccccc;
|
|
top: 50%;
|
|
margin-top: -@s/2;
|
|
right: @default-padding;
|
|
.size(@s);
|
|
.border-radius(50%);
|
|
}
|
|
|
|
&.active:after {
|
|
background-color: @brand-success;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.notifications {
|
|
width: @userinfo-notifications-dropdown-width;
|
|
|
|
.dropdown-menu-list {
|
|
max-height: @userinfo-notifications-dropdown-height;
|
|
|
|
> li {
|
|
|
|
> a {
|
|
|
|
> i {
|
|
float: left;
|
|
background: @default-border-color;
|
|
color: #FFF;
|
|
padding: 5px;
|
|
line-height: 17px;
|
|
width: 27px;
|
|
text-align: center;
|
|
.border-radius(50%);
|
|
}
|
|
|
|
.line {
|
|
padding-left: 45px;
|
|
}
|
|
}
|
|
|
|
&.notification-primary > a > i {
|
|
background-color: @brand-primary;
|
|
}
|
|
|
|
&.notification-success > a > i {
|
|
background-color: @brand-success;
|
|
}
|
|
|
|
&.notification-danger > a > i {
|
|
background-color: @brand-danger;
|
|
}
|
|
|
|
&.notification-warning > a > i {
|
|
background-color: @brand-warning;
|
|
}
|
|
|
|
&.notification-info > a > i {
|
|
background-color: @brand-info;
|
|
}
|
|
|
|
&.notification-secondary > a > i {
|
|
background-color: #FFF;
|
|
color: #444;
|
|
.box-shadow(0 0 0 1px #eee);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
&.user-profile-menu {
|
|
@default-border-color: #f0f0f0;
|
|
|
|
right: -1px;
|
|
left: auto;
|
|
width: @userinfo-userprofile-width;
|
|
|
|
li {
|
|
position: relative;
|
|
display: block;
|
|
padding: 0;
|
|
margin: 0;
|
|
padding: @base-padding + 5 @base-padding*2;
|
|
padding-bottom: 0;
|
|
|
|
a {
|
|
display: block;
|
|
color: @userinfo-link-color;
|
|
padding: 0;
|
|
padding-bottom: @base-padding + 5;
|
|
border-bottom: 1px solid @default-border-color;
|
|
|
|
&:hover {
|
|
background: none;
|
|
}
|
|
|
|
&:hover {
|
|
color: @userinfo-link-active-color;
|
|
}
|
|
}
|
|
|
|
&.last {
|
|
background: #fafafa;
|
|
|
|
&:after {
|
|
content: '';
|
|
display: block;
|
|
position: absolute;
|
|
height: 1px;
|
|
background: @default-border-color;
|
|
top: -1px;
|
|
left: 0; right: 0;
|
|
}
|
|
|
|
> a {
|
|
border-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|