界面优化
This commit is contained in:
lealife committed
1 parent
b3c771a87f
commit
7440218974
86 files changed
+3159
-17934
No files matched your search
+1
-505
@@ -1,505 +1 @@
|
||||
@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;
|
||||
}
|
||||
::selection {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
::-webkit-selection {
|
||||
background: #000000;
|
||||
color: #ffffff;
|
||||
}
|
||||
*,
|
||||
body {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
font-weight: 300;
|
||||
font-size: 14px;
|
||||
}
|
||||
h1,
|
||||
h2,
|
||||
h3 {
|
||||
font-family: 'Open Sans', 'Helvetica Neue', Arial, 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif;
|
||||
font-weight: 300 !important;
|
||||
}
|
||||
ul,
|
||||
ol {
|
||||
list-style: none;
|
||||
}
|
||||
a {
|
||||
color: #000;
|
||||
cursor: pointer;
|
||||
}
|
||||
a:hover {
|
||||
text-decoration: none !important;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: block;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.navbar-brand span {
|
||||
float: left;
|
||||
}
|
||||
#logo {
|
||||
font-family: "leanoteregular";
|
||||
font-size: 24px;
|
||||
}
|
||||
#logo:before {
|
||||
content: "b";
|
||||
}
|
||||
#navbar {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
padding: 0;
|
||||
}
|
||||
.navbar,
|
||||
.navbar-default {
|
||||
margin: 0;
|
||||
border-bottom: 1px solid #DEDDDF;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
|
||||
background-color: #fafbfc;
|
||||
}
|
||||
.navbar a,
|
||||
.navbar-default a {
|
||||
font-size: 16px;
|
||||
}
|
||||
.navbar-default .navbar-nav > .active > a,
|
||||
.navbar-default .navbar-nav > .active > a:hover,
|
||||
.navbar-default .navbar-nav > .active > a:focus {
|
||||
background: none;
|
||||
border-bottom: 2px solid #65bd77;
|
||||
}
|
||||
.navbar-form {
|
||||
padding: 0;
|
||||
}
|
||||
#keywords {
|
||||
font-size: 12px;
|
||||
padding: 7px 20px;
|
||||
border-radius: 30px;
|
||||
box-shadow: inset 0 0 4px 0 rgba(0, 0, 0, 0.1);
|
||||
-webkit-transform: translate3d(0, 0, 0);
|
||||
-webkit-transition: 0.3s ease;
|
||||
-moz-transition: 0.3s ease;
|
||||
transition: 0.3s ease;
|
||||
background-clip: padding-box;
|
||||
width: 65%;
|
||||
height: auto;
|
||||
margin-top: 3px;
|
||||
border-color: #ccc;
|
||||
float: right;
|
||||
}
|
||||
#keywords:focus {
|
||||
outline: none;
|
||||
width: 100%;
|
||||
}
|
||||
#content {
|
||||
width: 600px;
|
||||
margin: auto;
|
||||
margin-top: 60px;
|
||||
}
|
||||
.sort-nav {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.sort-nav li {
|
||||
float: left;
|
||||
margin: 10px 15px 5px 0;
|
||||
}
|
||||
.sort-nav li a {
|
||||
padding: 5px 10px;
|
||||
border: 1px solid #cccccc;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
line-height: 25px;
|
||||
border-radius: 14px;
|
||||
}
|
||||
.sort-nav li.active a {
|
||||
color: white;
|
||||
background: #65bd77;
|
||||
border-color: #65bd77;
|
||||
}
|
||||
.thumbnails {
|
||||
padding: 0;
|
||||
padding-top: 25px;
|
||||
}
|
||||
.thumbnails > li {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
margin: 0 0 10px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px dashed #d9d9d9;
|
||||
}
|
||||
a:hover {
|
||||
color: #2a6496;
|
||||
}
|
||||
.article .title {
|
||||
display: inline-block;
|
||||
margin-right: 40px;
|
||||
color: #3b3b3b;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
}
|
||||
.article .title:hover {
|
||||
color: #2a6496;
|
||||
}
|
||||
.article .content {
|
||||
color: #717171;
|
||||
font-size: 14px;
|
||||
font-weight: 100;
|
||||
line-height: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
.article .article-info {
|
||||
margin-top: 5px;
|
||||
color: #999999;
|
||||
}
|
||||
.article .article-info a {
|
||||
color: #999999;
|
||||
}
|
||||
.article .article-info > a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.user-card {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
padding-right: 50px;
|
||||
right: -50px;
|
||||
}
|
||||
.user-card .dropdown-menu {
|
||||
width: 310px;
|
||||
left: -140px;
|
||||
}
|
||||
.user-card .dropdown-menu:before {
|
||||
content: "";
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-left: 10px solid transparent;
|
||||
border-right: 10px solid transparent;
|
||||
border-bottom: 10px solid #eaedef;
|
||||
background: none;
|
||||
background-image: none;
|
||||
top: -7px;
|
||||
left: 145px;
|
||||
right: auto;
|
||||
}
|
||||
.user-card .user-card-content {
|
||||
width: 310px;
|
||||
padding: 0;
|
||||
background: #eaedef;
|
||||
top: 35px;
|
||||
border-radius: 6px;
|
||||
word-break: break-all;
|
||||
}
|
||||
.user-card .user-card-content .loading {
|
||||
display: none;
|
||||
}
|
||||
.user-card .user-card-content.loading .loading {
|
||||
display: block;
|
||||
}
|
||||
.user-card .user-card-content.loading .header,
|
||||
.user-card .user-card-content.loading .content {
|
||||
display: none;
|
||||
}
|
||||
.user-card .user-card-content .loading {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.user-card .user-card-content .loading:before {
|
||||
content: "";
|
||||
width: 17px;
|
||||
height: 11px;
|
||||
background: url(http://baijii-common.b0.upaiyun.com/loaders/tiny.gif);
|
||||
background-size: 17px 11px;
|
||||
display: inline-block;
|
||||
}
|
||||
.user-card .user-card-content .header {
|
||||
padding: 10px;
|
||||
overflow: hidden;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
border-radius: 6px 6px 0 0;
|
||||
}
|
||||
.user-card .user-card-content .header .btn {
|
||||
box-sizing: border-box;
|
||||
width: 95px;
|
||||
}
|
||||
.user-card .user-card-content .header .follow-btn {
|
||||
display: none;
|
||||
}
|
||||
.user-card .user-card-content .header.not-followed .follow-btn {
|
||||
display: block;
|
||||
}
|
||||
.user-card .user-card-content .header.not-followed .following-btn {
|
||||
display: none;
|
||||
}
|
||||
.user-card .user-card-content .header .following-btn .unfollow {
|
||||
display: none;
|
||||
}
|
||||
.user-card .user-card-content .header .following-btn:hover .following {
|
||||
display: none;
|
||||
}
|
||||
.user-card .user-card-content .header .following-btn:hover .unfollow {
|
||||
display: block;
|
||||
}
|
||||
.user-card .user-card-content .header .follow-btn,
|
||||
.user-card .user-card-content .header .following-btn {
|
||||
float: right;
|
||||
padding: 4px 10px 2px;
|
||||
margin: 0;
|
||||
}
|
||||
.user-card .user-card-content .header .avatar {
|
||||
float: left;
|
||||
}
|
||||
.user-card .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 .user-card-content .header > span {
|
||||
position: relative;
|
||||
top: 6px;
|
||||
font-weight: bold;
|
||||
}
|
||||
.user-card .user-card-content .content {
|
||||
padding: 0 10px 10px;
|
||||
font-size: 12px;
|
||||
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||||
}
|
||||
.user-card .user-card-content .content p {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.user-card .user-card-content .content .intro {
|
||||
padding: 10px 12px 7px;
|
||||
margin: 0 -10px 0;
|
||||
background: white;
|
||||
border-bottom: 1px solid #d9d9d9;
|
||||
}
|
||||
.user-card .user-card-content .content ul {
|
||||
padding: 1px 10px 2px 10px;
|
||||
margin: 0 -10px 10px;
|
||||
background: #ffffff;
|
||||
}
|
||||
.user-card .user-card-content .content ul li {
|
||||
border-bottom: 1px dashed #d9d9d9;
|
||||
}
|
||||
.user-card .user-card-content .content ul li a {
|
||||
margin: 5px 0;
|
||||
line-height: 20px;
|
||||
display: block;
|
||||
}
|
||||
.user-card .user-card-content .content ul time {
|
||||
position: absolute;
|
||||
right: 10px;
|
||||
color: #999999;
|
||||
font-size: 12px;
|
||||
}
|
||||
.user-card .user-card-content .content h5 {
|
||||
margin: 0;
|
||||
padding-top: 3px;
|
||||
margin-right: 63px;
|
||||
font-size: 12px;
|
||||
font-family: "lucida grande", "lucida sans unicode", lucida, helvetica, "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
|
||||
font-weight: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
.user-card .user-card-content .content a {
|
||||
color: #999999;
|
||||
}
|
||||
.avatar {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
text-align: center;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
}
|
||||
.avatar img {
|
||||
width: 30px;
|
||||
border-radius: 50%;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
}
|
||||
#pagination {
|
||||
text-align: center;
|
||||
}
|
||||
#pagination ul {
|
||||
margin: 0;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.pagination > .active > a,
|
||||
.pagination > .active > span,
|
||||
.pagination > .active > a:hover,
|
||||
.pagination > .active > span:hover,
|
||||
.pagination > .active > a:focus,
|
||||
.pagination > .active > span:focus {
|
||||
background-color: #65bd77;
|
||||
border-color: #65bd77;
|
||||
}
|
||||
#footer {
|
||||
text-align: center;
|
||||
margin: 20px 0;
|
||||
margin-top: 20px;
|
||||
color: #ccc;
|
||||
}
|
||||
#footer a {
|
||||
color: #ccc;
|
||||
}
|
||||
#navbarUser {
|
||||
float: right;
|
||||
line-height: 50px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
#navbarUser a {
|
||||
color: #666;
|
||||
}
|
||||
#navbarUser .my-logo {
|
||||
max-height: 32px;
|
||||
border: 2px solid white;
|
||||
max-width: 100px;
|
||||
border-radius: 50%;
|
||||
margin-top: -3px;
|
||||
}
|
||||
.dropdown-menu:before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 20px;
|
||||
background-image: url("../../images/triangle_2x.png");
|
||||
background-size: 20px 12px;
|
||||
}
|
||||
.open > .dropdown-menu,
|
||||
.dropdown-submenu:hover > .dropdown-menu {
|
||||
opacity: 1;
|
||||
transform: scale(1, 1);
|
||||
-webkit-transform: scale(1, 1);
|
||||
-moz-transform: scale(1, 1);
|
||||
-o-transform: scale(1, 1);
|
||||
}
|
||||
.dropdown-menu {
|
||||
opacity: 0;
|
||||
display: block;
|
||||
-webkit-transform: scale(0, 0);
|
||||
-webkit-transform-origin: top;
|
||||
-webkit-animation-fill-mode: forwards;
|
||||
-webkit-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
|
||||
-o-transform: scale(0, 0);
|
||||
-o-transform-origin: top;
|
||||
-o-animation-fill-mode: forwards;
|
||||
-o-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
|
||||
-moz-transform: scale(0, 0);
|
||||
-moz-transform-origin: top;
|
||||
-moz-animation-fill-mode: forwards;
|
||||
-moz-transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
|
||||
transform: scale(0, 0);
|
||||
transform-origin: top;
|
||||
animation-fill-mode: forwards;
|
||||
transition: all 0.2s cubic-bezier(0.34, 1.21, 0.4, 1);
|
||||
}
|
||||
a:focus {
|
||||
text-decoration: none;
|
||||
}
|
||||
@media screen and (max-width: 780px) {
|
||||
#navbarUser {
|
||||
display: none;
|
||||
}
|
||||
#keywords {
|
||||
float: none;
|
||||
width: 100%;
|
||||
}
|
||||
#navbar {
|
||||
padding: 0 10px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
#content {
|
||||
width: 100%;
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
#searchInfo {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#searchInfo .keywords-info,
|
||||
#searchInfo .keywords-title {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
#searchInfo .keywords-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
#searchInfo .clear-search {
|
||||
display: inline-block;
|
||||
color: #a94442;
|
||||
}
|
||||
.article .article-info .label-post {
|
||||
background: #fff;
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
padding: 0 2px;
|
||||
}
|
||||
.article .article-info .label-post:hover {
|
||||
background: #000;
|
||||
}
|
||||
.article .article-info .label-yellow:hover {
|
||||
background: #f0ad4e;
|
||||
}
|
||||
.article .article-info .label-green:hover {
|
||||
background: #5cb85c;
|
||||
}
|
||||
.article .article-info .label-blue:hover {
|
||||
background: #428bca;
|
||||
}
|
||||
.article .article-info .label-red:hover {
|
||||
background: #d9534f;
|
||||
}
|
||||
@font-face{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:400;font-style:normal}::selection{background:#000;color:#fff}::-moz-selection{background:#000;color:#fff}::-webkit-selection{background:#000;color:#fff}*,body{font-family:"lucida grande","lucida sans unicode",lucida,helvetica,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;font-weight:300;font-size:14px}h1,h2,h3{font-family:"lucida grande","lucida sans unicode",lucida,helvetica,"Hiragino Sans GB","Microsoft YaHei","WenQuanYi Micro Hei",sans-serif;font-weight:300!important}ul,ol{list-style:none}a{color:#000;cursor:pointer}a:hover{text-decoration:none!important}.navbar-brand{display:block;line-height:50px;padding:0;padding-left:10px}.navbar-brand span{float:left}#logo{font-family:leanote;speak:none;font-style:normal;font-weight:400;font-variant:normal;text-transform:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:24px}#logo:before{content:"\e601"}#navbar{width:650px;margin:auto;padding:0}.navbar,.navbar-default{margin:0;border-bottom:1px solid #DEDDDF;box-shadow:0 1px 2px rgba(0,0,0,.04),inset 0 1px 0 #fff;background-color:#fafbfc}.navbar a,.navbar-default a{font-size:16px}.navbar-default .navbar-nav>.active>a,.navbar-default .navbar-nav>.active>a:hover,.navbar-default .navbar-nav>.active>a:focus{background:0 0;border-bottom:2px solid #65bd77}.navbar-form{padding:0}#keywords{font-size:12px;padding:7px 20px;border-radius:30px;box-shadow:inset 0 0 4px 0 rgba(0,0,0,.1);-webkit-transform:translate3d(0,0,0);-webkit-transition:.3s ease;-moz-transition:.3s ease;transition:.3s ease;background-clip:padding-box;width:65%;height:auto;margin-top:3px;border-color:#ccc;float:right}#keywords:focus{outline:0;width:100%}#content{width:650px;margin:auto;margin-top:60px}.sort-nav{list-style:none;margin:0;padding:0}.sort-nav li{float:left;margin:10px 15px 5px 0}.sort-nav li a{padding:5px 10px;border:1px solid #ccc;font-size:12px;font-weight:400;line-height:25px;border-radius:14px}.sort-nav li.active a{color:#fff;background:#65bd77;border-color:#65bd77}.thumbnails{padding:0;padding-top:25px}.thumbnails>li{position:relative;width:100%;margin:0 0 10px;padding-bottom:15px;border-bottom:1px dashed #d9d9d9}a:hover{color:#2a6496}.article .title{display:inline-block;margin-right:40px;color:#3b3b3b;font-size:24px;font-weight:700;line-height:36px}.article .title:hover{color:#2a6496}.article .content{color:#717171;font-size:14px;font-weight:100;line-height:24px;word-wrap:break-word}.article .article-info{margin-top:5px;color:#999}.article .article-info a{color:#999}.article .article-info>a{margin-right:10px}.user-card{position:absolute;top:1px;padding-right:50px;right:-50px}.user-card .dropdown-menu{width:310px;left:-140px}.user-card .dropdown-menu:before{content:"";width:0;height:0;border-left:10px solid transparent;border-right:10px solid transparent;border-bottom:10px solid #eaedef;background:0 0;background-image:none;top:-7px;left:145px;right:auto}.user-card-content{width:310px;padding:0;background:#eaedef;top:35px;border-radius:6px;word-break:break-all}.user-card-content .loading{display:none}.user-card-content.loading .loading{display:block}.user-card-content.loading .header,.user-card-content.loading .content{display:none}.user-card-content .loading{text-align:center;padding:10px 0}.user-card-content .loading: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}.user-card-content .header .btn,.relation-btn .btn{box-sizing:border-box;width:95px}.user-card-content .header .follow-btn,.relation-btn .follow-btn{display:none}.user-card-content .header.not-followed .follow-btn,.relation-btn.not-followed .follow-btn{display:block}.user-card-content .header.not-followed .following-btn,.relation-btn.not-followed .following-btn{display:none}.following-btn .unfollow{display:none}.following-btn:hover .following{display:none}.following-btn:hover .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:700}.user-card-content .content{padding:0 10px 10px;font-size:12px}.user-card-content .content p{margin-bottom:0}.usLine truncated
|
||||
Reference in new issue
Block a user