界面优化
This commit is contained in:
lealife
File diff suppressed because one or more lines are too long
@ -1,6 +1,5 @@
|
||||
@bgColor: #fff;
|
||||
@headerBgColor: #fff;
|
||||
@fontFamily: 'Open Sans','Helvetica Neue',Arial,'Hiragino Sans GB','Microsoft YaHei','WenQuanYi Micro Hei',sans-serif;
|
||||
@fontFamily: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||||
@aWhiteColor: #fff;
|
||||
@aBlackColor: #000;
|
||||
@ -13,45 +12,20 @@
|
||||
@containerWidth: 845px;
|
||||
@titleColor: @hColor; // #5AD4A0;
|
||||
|
||||
@pwidth: 600px;
|
||||
@pwidth: 650px;
|
||||
@green: #65bd77;
|
||||
@gray: #ccc;
|
||||
|
||||
// font
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 300;
|
||||
src: local('Open Sans Light'), local('OpenSans-Light'), url('../../fonts/open-sans2/DXI1ORHCpsQm3Vp6mXoaTXhCUOGz7vYGh680lGh-uXM.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans'), local('OpenSans'), url('../../fonts/open-sans2/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
font-weight: 700;
|
||||
src: local('Open Sans Bold'), local('OpenSans-Bold'), url('../../fonts/open-sans2/k3k702ZOKiLJc3WVjuplzHhCUOGz7vYGh680lGh-uXM.woff') format('woff');
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: italic;
|
||||
font-weight: 400;
|
||||
src: local('Open Sans Italic'), local('OpenSans-Italic'), url('../../fonts/open-sans2/xjAJXh38I15wypJXxuGMBobN6UDyHWBl620a-IRfuBk.woff') format('woff');
|
||||
}
|
||||
/* leanote */
|
||||
@font-face {
|
||||
font-family: 'leanoteregular';
|
||||
src: url('../../fonts/leanote/leanote-regular-webfont.eot');
|
||||
src: url('../../fonts/leanote/leanote-regular-webfont.eot?#iefix') format('embedded-opentype'),
|
||||
url('../../fonts/leanote/leanote-regular-webfont.woff') format('woff'),
|
||||
url('../../fonts/leanote/leanote-regular-webfont.ttf') format('truetype'),
|
||||
url('../../fonts/leanote/leanote-regular-webfont.svg#leanoteregular') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-family: 'leanote';
|
||||
src:url('../../fonts/leanote-font2/leanote.eot?-vcf23i');
|
||||
src:url('../../fonts/leanote-font2/leanote.eot?#iefix-vcf23i') format('embedded-opentype'),
|
||||
url('../../fonts/leanote-font2/leanote.ttf?-vcf23i') format('truetype'),
|
||||
url('../../fonts/leanote-font2/leanote.woff?-vcf23i') format('woff'),
|
||||
url('../../fonts/leanote-font2/leanote.svg?-vcf23i#leanote') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@selectionBg: @aBlackColor;
|
||||
@ -92,11 +66,20 @@ a:hover {
|
||||
}
|
||||
}
|
||||
#logo {
|
||||
font-family: "leanoteregular";
|
||||
font-family: 'leanote';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 24px;
|
||||
}
|
||||
#logo:before {
|
||||
content: "b";
|
||||
content: "\e601";
|
||||
}
|
||||
|
||||
#navbar {
|
||||
@ -246,161 +229,165 @@ a:hover {
|
||||
right: auto;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content {
|
||||
width: 310px;
|
||||
padding: 0;
|
||||
background: @cardBg;
|
||||
top: 35px;
|
||||
border-radius: 6px;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
.user-card-content {
|
||||
width: 310px;
|
||||
padding: 0;
|
||||
background: @cardBg;
|
||||
top: 35px;
|
||||
border-radius: 6px;
|
||||
word-break: break-all;
|
||||
|
||||
.loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
.loading {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.loading {
|
||||
.loading {
|
||||
display: block;
|
||||
}
|
||||
.header,
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .loading {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
&:before {
|
||||
content: "";
|
||||
width: 17px;
|
||||
height: 11px;
|
||||
background: url(http://7xj51o.com1.z0.glb.clouddn.com/bar-loading.gif);
|
||||
background-size: 17px 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .header {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.not-followed {
|
||||
.follow-btn {
|
||||
display: block;
|
||||
}
|
||||
.following-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.following-btn {
|
||||
.unfollow {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.following {
|
||||
display: none;
|
||||
}
|
||||
.unfollow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .header .follow-btn,
|
||||
.user-card-content .header .following-btn {
|
||||
float: right;
|
||||
padding: 4px 10px 2px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.user-card-content .header .avatar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.user-card-content .username {
|
||||
line-height: 32px;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 100px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-card-content .header>span {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.user-card-content .content {
|
||||
padding: 0 10px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-card-content .content p {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.user-card-content .content .intro {
|
||||
padding: 10px 12px 7px;
|
||||
margin: 0 -10px 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #d9d9d9
|
||||
}
|
||||
|
||||
.user-card-content .content ul {
|
||||
padding: 1px 10px 2px 10px;
|
||||
margin: 0 -10px 10px;
|
||||
background: white
|
||||
}
|
||||
|
||||
.user-card-content .content ul li {
|
||||
border-bottom: 1px dashed #d9d9d9;
|
||||
a {
|
||||
margin: 5px 0;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
}
|
||||
.header,
|
||||
.content {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .loading {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
&:before {
|
||||
content: "";
|
||||
width: 17px;
|
||||
height: 11px;
|
||||
background: url(http://7xj51o.com1.z0.glb.clouddn.com/bar-loading.gif);
|
||||
background-size: 17px 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .header, .relation-btn {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-radius: 6px 6px 0 0;
|
||||
|
||||
.btn {
|
||||
box-sizing: border-box;
|
||||
width: 95px;
|
||||
}
|
||||
|
||||
.follow-btn {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&.not-followed {
|
||||
.follow-btn {
|
||||
display: block;
|
||||
}
|
||||
.following-btn {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .content ul time {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-card-content .content h5 {
|
||||
margin: 0;
|
||||
padding-top: 3px;
|
||||
margin-right: 63px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.user-card-content .content a {
|
||||
color: #999999
|
||||
}
|
||||
.following-btn {
|
||||
.unfollow {
|
||||
display: none;
|
||||
}
|
||||
&:hover {
|
||||
.following {
|
||||
display: none;
|
||||
}
|
||||
.unfollow {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .header .follow-btn,
|
||||
.user-card-content .header .following-btn {
|
||||
float: right;
|
||||
padding: 4px 10px 2px;
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.user-card-content .header .avatar {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.user-card-content .username {
|
||||
line-height: 32px;
|
||||
padding-left: 10px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
margin-right: 100px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.user-card-content .header>span {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
font-weight: bold
|
||||
}
|
||||
|
||||
.user-card-content .content {
|
||||
padding: 0 10px 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-card-content .content p {
|
||||
margin-bottom: 0
|
||||
}
|
||||
|
||||
.user-card-content .content .intro {
|
||||
padding: 10px 12px 7px;
|
||||
margin: 0 -10px 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #d9d9d9
|
||||
}
|
||||
|
||||
.user-card-content .content ul {
|
||||
padding: 1px 10px 2px 10px;
|
||||
margin: 0 -10px 10px;
|
||||
background: white
|
||||
}
|
||||
|
||||
.user-card-content .content ul li {
|
||||
border-bottom: 1px dashed #d9d9d9;
|
||||
a {
|
||||
margin: 5px 0;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
}
|
||||
&.no-post {
|
||||
border: none;
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
.user-card-content .content ul time {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.user-card-content .content h5 {
|
||||
margin: 0;
|
||||
padding-top: 3px;
|
||||
margin-right: 63px;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
.user-card-content .content a {
|
||||
color: #999999
|
||||
}
|
||||
|
||||
|
||||
@ -531,6 +518,11 @@ a:focus {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.user-card {
|
||||
padding-right: 0;
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
#searchInfo {
|
||||
@ -571,4 +563,83 @@ a:focus {
|
||||
.label-red:hover {
|
||||
background: #d9534f;
|
||||
}
|
||||
}
|
||||
|
||||
.no-author {
|
||||
border: 2px dashed #ccc;
|
||||
border-radius: 20px;
|
||||
padding: 20px;
|
||||
height: 450px;
|
||||
margin-top: 80px;
|
||||
text-align: center;
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
padding-top: 100px;
|
||||
}
|
||||
|
||||
// followers
|
||||
|
||||
.followers {
|
||||
margin-top: 70px !important;
|
||||
|
||||
.followers-nav {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.each-user {
|
||||
width: 215px;
|
||||
float: left;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.avatar-wrap {
|
||||
position: relative;
|
||||
.user-card {
|
||||
right: 0;
|
||||
left: 0;
|
||||
top: 0;
|
||||
}
|
||||
}
|
||||
.avatar-outer {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
line-height: 56px;
|
||||
border: 1px solid #eee;
|
||||
margin-right: 10px;
|
||||
img {
|
||||
width: 60px;
|
||||
}
|
||||
}
|
||||
.username-btn {
|
||||
margin-left: 70px;
|
||||
button {
|
||||
padding: 3px 4px;
|
||||
width: 85px;
|
||||
margin-top: 1px;
|
||||
}
|
||||
}
|
||||
.username {
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
max-width: 140px;
|
||||
}
|
||||
|
||||
.relation-btn {
|
||||
padding: 0;
|
||||
border: 0;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
.user-card .dropdown-menu {
|
||||
left: -125px;
|
||||
top: 60px;
|
||||
}
|
||||
|
||||
.no-author {
|
||||
margin-top: 30px;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user