v1.0 beta init
This commit is contained in:
life
@ -1,3 +1,258 @@
|
||||
html, * {
|
||||
// -webkit-font-smoothing: antialiased;
|
||||
}
|
||||
#posts img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#content {
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
// animation
|
||||
@-webkit-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
margin-top: 2px
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
margin-top: 2px
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
margin-top: 2px
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
margin-top: 2px
|
||||
}
|
||||
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@-webkit-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@-ms-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0
|
||||
}
|
||||
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1
|
||||
}
|
||||
}
|
||||
a, .btn {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
ul.dropdown-menu {
|
||||
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px;
|
||||
&:before {
|
||||
content: "";
|
||||
width: 20px;
|
||||
height: 12px;
|
||||
position: absolute;
|
||||
top: -12px;
|
||||
right: 20px;
|
||||
background-image: url("../../images/triangle_2x.png");
|
||||
background-size: 20px 12px;
|
||||
}
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.open ul.dropdown-menu {
|
||||
-webkit-animation: pulldown .2s;
|
||||
animation: pulldown .2s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.created-time .fa {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
#blogNav {
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#blogNavContent {
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
display: none;
|
||||
-webkit-overflow-scrolling: touch !important; // for iphone
|
||||
}
|
||||
#blogNavNav {
|
||||
cursor: pointer;
|
||||
}
|
||||
#blogNav a {
|
||||
color: #666;
|
||||
}
|
||||
#blogNav:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
#blogNav a:hover {
|
||||
color: #0fb264;
|
||||
}
|
||||
#blogNav ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h1 {
|
||||
}
|
||||
#blogNav ul .nav-h2 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h3 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
#blogNav ul .nav-h4 {
|
||||
margin-left: 40px;
|
||||
}
|
||||
#blogNav ul .nav-h5 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: none;
|
||||
}
|
||||
#footer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: none;
|
||||
}
|
||||
|
||||
// 主题列表
|
||||
#themeList {
|
||||
label {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.preview {
|
||||
display: block;
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
@ -1,6 +1,224 @@
|
||||
#posts img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#content * {
|
||||
font-size: 16px;
|
||||
}
|
||||
#content h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
#content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
#content h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
#content h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
@-webkit-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
a,
|
||||
.btn {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px;
|
||||
}
|
||||
ul.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;
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.open ul.dropdown-menu {
|
||||
-webkit-animation: pulldown .2s;
|
||||
animation: pulldown .2s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.created-time .fa {
|
||||
color: #666;
|
||||
}
|
||||
#blogNav {
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#blogNavContent {
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
display: none;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
#blogNavNav {
|
||||
cursor: pointer;
|
||||
}
|
||||
#blogNav a {
|
||||
color: #666;
|
||||
}
|
||||
#blogNav:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
#blogNav a:hover {
|
||||
color: #0fb264;
|
||||
}
|
||||
#blogNav ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h2 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h3 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
#blogNav ul .nav-h4 {
|
||||
margin-left: 40px;
|
||||
}
|
||||
#blogNav ul .nav-h5 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: none;
|
||||
}
|
||||
#footer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: none;
|
||||
}
|
||||
#themeList label {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#themeList .preview {
|
||||
display: block;
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
@ -174,3 +392,151 @@ a:hover {
|
||||
margin-bottom: 10px ;
|
||||
padding-left: 20px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
background-color: #fbfcf7;
|
||||
}
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
#headerContainer,
|
||||
#footerContainer {
|
||||
background-color: #fbfcf7;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#posts .each-post,
|
||||
#postsContainer {
|
||||
background-color: #fbfcf7 !important;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#posts .each-post {
|
||||
padding: 10px;
|
||||
}
|
||||
#posts .each-post .title {
|
||||
font-size: 24px;
|
||||
border-left: 5px solid #65bd77;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.created-time {
|
||||
display: none;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: block;
|
||||
}
|
||||
.mobile-created-time #userLogo {
|
||||
display: inline-block;
|
||||
max-height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right-section .dropdown,
|
||||
.right-section .btn {
|
||||
display: none !important;
|
||||
}
|
||||
#blogNav {
|
||||
left: initial !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
#postsContainer .container,
|
||||
#footerContainer .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
#postsContainer {
|
||||
margin: 0 !important;
|
||||
max-width: 100%;
|
||||
padding-top: 10px;
|
||||
background: #f5f5f5 url("../../images/noise.png");
|
||||
}
|
||||
#posts {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
#footerContainer #footer a {
|
||||
padding: 3px;
|
||||
}
|
||||
#footerContainer #footer a:hover,
|
||||
#footerContainer #footer a:focus {
|
||||
color: #65bd77;
|
||||
}
|
||||
#headerAndNav {
|
||||
position: initial;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border-bottom: 2px dashed #ebeff2;
|
||||
}
|
||||
#headerAndNav #headerContainer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#headerAndNav #header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#headerAndNav #header h1 {
|
||||
display: none;
|
||||
}
|
||||
#headerAndNav .navbar-collapse {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#headerAndNav #blogDesc {
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
#headerAndNav .navbar-brand {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#headerAndNav .navbar-brand img {
|
||||
height: 40px;
|
||||
}
|
||||
#headerAndNav .navbar .container {
|
||||
width: auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
#headerAndNav .navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: #fbfcf7;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid #DEDDDF;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
|
||||
background-color: #FDFFF5;
|
||||
}
|
||||
#headerAndNav .navbar-nav {
|
||||
margin: 0 10px;
|
||||
}
|
||||
#headerAndNav .navbar-nav a {
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#headerAndNav #search {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
#headerAndNav .navbar-form {
|
||||
border: none;
|
||||
}
|
||||
#myTab,
|
||||
.tab-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -203,4 +203,7 @@ a:hover {
|
||||
padding-left:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@import "mobile.less";
|
||||
|
||||
@ -1,6 +1,224 @@
|
||||
#posts img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#content * {
|
||||
font-size: 16px;
|
||||
}
|
||||
#content h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
#content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
#content h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
#content h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
@-webkit-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
a,
|
||||
.btn {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px;
|
||||
}
|
||||
ul.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;
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.open ul.dropdown-menu {
|
||||
-webkit-animation: pulldown .2s;
|
||||
animation: pulldown .2s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.created-time .fa {
|
||||
color: #666;
|
||||
}
|
||||
#blogNav {
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#blogNavContent {
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
display: none;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
#blogNavNav {
|
||||
cursor: pointer;
|
||||
}
|
||||
#blogNav a {
|
||||
color: #666;
|
||||
}
|
||||
#blogNav:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
#blogNav a:hover {
|
||||
color: #0fb264;
|
||||
}
|
||||
#blogNav ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h2 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h3 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
#blogNav ul .nav-h4 {
|
||||
margin-left: 40px;
|
||||
}
|
||||
#blogNav ul .nav-h5 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: none;
|
||||
}
|
||||
#footer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: none;
|
||||
}
|
||||
#themeList label {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#themeList .preview {
|
||||
display: block;
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
@ -160,3 +378,151 @@ a:hover {
|
||||
margin: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
background-color: #fbfcf7;
|
||||
}
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
#headerContainer,
|
||||
#footerContainer {
|
||||
background-color: #fbfcf7;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#posts .each-post,
|
||||
#postsContainer {
|
||||
background-color: #fbfcf7 !important;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#posts .each-post {
|
||||
padding: 10px;
|
||||
}
|
||||
#posts .each-post .title {
|
||||
font-size: 24px;
|
||||
border-left: 5px solid #65bd77;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.created-time {
|
||||
display: none;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: block;
|
||||
}
|
||||
.mobile-created-time #userLogo {
|
||||
display: inline-block;
|
||||
max-height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right-section .dropdown,
|
||||
.right-section .btn {
|
||||
display: none !important;
|
||||
}
|
||||
#blogNav {
|
||||
left: initial !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
#postsContainer .container,
|
||||
#footerContainer .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
#postsContainer {
|
||||
margin: 0 !important;
|
||||
max-width: 100%;
|
||||
padding-top: 10px;
|
||||
background: #f5f5f5 url("../../images/noise.png");
|
||||
}
|
||||
#posts {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
#footerContainer #footer a {
|
||||
padding: 3px;
|
||||
}
|
||||
#footerContainer #footer a:hover,
|
||||
#footerContainer #footer a:focus {
|
||||
color: #65bd77;
|
||||
}
|
||||
#headerAndNav {
|
||||
position: initial;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border-bottom: 2px dashed #ebeff2;
|
||||
}
|
||||
#headerAndNav #headerContainer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#headerAndNav #header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#headerAndNav #header h1 {
|
||||
display: none;
|
||||
}
|
||||
#headerAndNav .navbar-collapse {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#headerAndNav #blogDesc {
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
#headerAndNav .navbar-brand {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#headerAndNav .navbar-brand img {
|
||||
height: 40px;
|
||||
}
|
||||
#headerAndNav .navbar .container {
|
||||
width: auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
#headerAndNav .navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: #fbfcf7;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid #DEDDDF;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
|
||||
background-color: #FDFFF5;
|
||||
}
|
||||
#headerAndNav .navbar-nav {
|
||||
margin: 0 10px;
|
||||
}
|
||||
#headerAndNav .navbar-nav a {
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#headerAndNav #search {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
#headerAndNav .navbar-form {
|
||||
border: none;
|
||||
}
|
||||
#myTab,
|
||||
.tab-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -182,4 +182,6 @@ a:hover {
|
||||
padding-left:20px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@import "mobile.less";
|
||||
|
||||
@ -1,6 +1,224 @@
|
||||
#posts img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#content * {
|
||||
font-size: 16px;
|
||||
}
|
||||
#content h1 {
|
||||
font-size: 30px;
|
||||
}
|
||||
#content h2 {
|
||||
font-size: 24px;
|
||||
}
|
||||
#content h3 {
|
||||
font-size: 18px;
|
||||
}
|
||||
#content h4 {
|
||||
font-size: 14px;
|
||||
}
|
||||
@-webkit-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes dropdown {
|
||||
0% {
|
||||
margin-top: -25px;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
margin-top: 2px;
|
||||
}
|
||||
100% {
|
||||
margin-top: 0;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-webkit-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-moz-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@-ms-keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
@keyframes pulldown {
|
||||
0% {
|
||||
top: 0;
|
||||
opacity: 0;
|
||||
}
|
||||
90% {
|
||||
top: 90%;
|
||||
}
|
||||
100% {
|
||||
top: 100%;
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
a,
|
||||
.btn {
|
||||
-webkit-transition: all 0.2s ease;
|
||||
-moz-transition: all 0.2s ease;
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
.btn:focus {
|
||||
outline: none;
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
box-shadow: rgba(0, 0, 0, 0.172549) 0px 6px 12px 0px;
|
||||
}
|
||||
ul.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;
|
||||
}
|
||||
ul.dropdown-menu {
|
||||
display: block;
|
||||
visibility: hidden;
|
||||
opacity: 0;
|
||||
}
|
||||
.open ul.dropdown-menu {
|
||||
-webkit-animation: pulldown .2s;
|
||||
animation: pulldown .2s;
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
.created-time .fa {
|
||||
color: #666;
|
||||
}
|
||||
#blogNav {
|
||||
display: none;
|
||||
background-color: #fff;
|
||||
opacity: 0.7;
|
||||
position: fixed;
|
||||
z-index: 10;
|
||||
padding: 3px;
|
||||
border-radius: 3px;
|
||||
}
|
||||
#blogNavContent {
|
||||
overflow-y: auto;
|
||||
max-height: 250px;
|
||||
display: none;
|
||||
-webkit-overflow-scrolling: touch !important;
|
||||
}
|
||||
#blogNavNav {
|
||||
cursor: pointer;
|
||||
}
|
||||
#blogNav a {
|
||||
color: #666;
|
||||
}
|
||||
#blogNav:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
#blogNav a:hover {
|
||||
color: #0fb264;
|
||||
}
|
||||
#blogNav ul {
|
||||
padding-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h2 {
|
||||
margin-left: 20px;
|
||||
}
|
||||
#blogNav ul .nav-h3 {
|
||||
margin-left: 30px;
|
||||
}
|
||||
#blogNav ul .nav-h4 {
|
||||
margin-left: 40px;
|
||||
}
|
||||
#blogNav ul .nav-h5 {
|
||||
margin-left: 50px;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: none;
|
||||
}
|
||||
#footer {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: none;
|
||||
}
|
||||
#themeList label {
|
||||
text-align: center;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
#themeList .preview {
|
||||
display: block;
|
||||
width: 400px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
padding: 5px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
@font-face {
|
||||
font-family: 'Open Sans';
|
||||
font-style: normal;
|
||||
@ -211,3 +429,151 @@ a:hover {
|
||||
.mce-btn {
|
||||
background: none !important;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
html,
|
||||
body {
|
||||
overflow-x: hidden;
|
||||
background-color: #fbfcf7;
|
||||
}
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
#headerContainer,
|
||||
#footerContainer {
|
||||
background-color: #fbfcf7;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#posts .each-post,
|
||||
#postsContainer {
|
||||
background-color: #fbfcf7 !important;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#posts .each-post {
|
||||
padding: 10px;
|
||||
}
|
||||
#posts .each-post .title {
|
||||
font-size: 24px;
|
||||
border-left: 5px solid #65bd77;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.container {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.created-time {
|
||||
display: none;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: block;
|
||||
}
|
||||
.mobile-created-time #userLogo {
|
||||
display: inline-block;
|
||||
max-height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
#content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right-section .dropdown,
|
||||
.right-section .btn {
|
||||
display: none !important;
|
||||
}
|
||||
#blogNav {
|
||||
left: initial !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
#postsContainer .container,
|
||||
#footerContainer .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
#postsContainer {
|
||||
margin: 0 !important;
|
||||
max-width: 100%;
|
||||
padding-top: 10px;
|
||||
background: #f5f5f5 url("../../images/noise.png");
|
||||
}
|
||||
#posts {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
#footerContainer #footer a {
|
||||
padding: 3px;
|
||||
}
|
||||
#footerContainer #footer a:hover,
|
||||
#footerContainer #footer a:focus {
|
||||
color: #65bd77;
|
||||
}
|
||||
#headerAndNav {
|
||||
position: initial;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border-bottom: 2px dashed #ebeff2;
|
||||
}
|
||||
#headerAndNav #headerContainer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#headerAndNav #header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
#headerAndNav #header h1 {
|
||||
display: none;
|
||||
}
|
||||
#headerAndNav .navbar-collapse {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#headerAndNav #blogDesc {
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
#headerAndNav .navbar-brand {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
}
|
||||
#headerAndNav .navbar-brand img {
|
||||
height: 40px;
|
||||
}
|
||||
#headerAndNav .navbar .container {
|
||||
width: auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
#headerAndNav .navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: #fbfcf7;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid #DEDDDF;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
|
||||
background-color: #FDFFF5;
|
||||
}
|
||||
#headerAndNav .navbar-nav {
|
||||
margin: 0 10px;
|
||||
}
|
||||
#headerAndNav .navbar-nav a {
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
#headerAndNav #search {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
#headerAndNav .navbar-form {
|
||||
border: none;
|
||||
}
|
||||
#myTab,
|
||||
.tab-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
|
||||
@ -232,4 +232,6 @@ a:hover {
|
||||
}
|
||||
.mce-btn {
|
||||
background: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
@import "mobile.less";
|
||||
|
||||
325
public/css/blog/comment.css
Normal file
325
public/css/blog/comment.css
Normal file
@ -0,0 +1,325 @@
|
||||
.entry-controls {
|
||||
text-align: right;
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
.entry-controls .right-section {
|
||||
float: right;
|
||||
color: #9d9e9f;
|
||||
}
|
||||
.entry-controls .right-section a {
|
||||
color: #9d9e9f;
|
||||
}
|
||||
.post-menu-button {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.ui-menu-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.entry-controls .control-item {
|
||||
margin-left: 15px;
|
||||
color: #9d9e9f;
|
||||
font-size: 15px;
|
||||
opacity: 1;
|
||||
-webkit-transition: all 0.05s ease-in-out;
|
||||
-moz-transition: all 0.05s ease-in-out;
|
||||
-o-transition: all 0.05s ease-in-out;
|
||||
transition: all 0.05s ease-in-out;
|
||||
}
|
||||
.vote-section-wrapper {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
.entry-controls .voters {
|
||||
display: block;
|
||||
margin-top: 52px;
|
||||
height: 25px;
|
||||
clear: both;
|
||||
}
|
||||
.entry-controls .voters .more-voters,
|
||||
.entry-controls .voters .voter {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
margin: 0 8px 8px 0;
|
||||
float: left;
|
||||
}
|
||||
.entry-controls .voters .voter > img {
|
||||
float: left;
|
||||
}
|
||||
.avatar-small {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.comment-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
}
|
||||
.comment-box a {
|
||||
font-size: 16px;
|
||||
}
|
||||
.comment-box .box-header {
|
||||
border-top: 1px solid #f1f2f3;
|
||||
font-size: 15px;
|
||||
color: #9d9e9f;
|
||||
padding: 30px 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
.comment-box .box-header .icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: -3px;
|
||||
}
|
||||
.comment-box .box-header a.comment-options {
|
||||
margin-left: 10px;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.comment-box .box-header {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
}
|
||||
.comment-box .load-more {
|
||||
height: 26px;
|
||||
margin-top: 15px;
|
||||
padding-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
border-top: solid 1px #f1f2f3;
|
||||
}
|
||||
.comment-box .load-more a {
|
||||
color: #9d9e9f;
|
||||
}
|
||||
.comment-box .ui-spinner {
|
||||
margin: 0 auto;
|
||||
}
|
||||
.comment-box .ui-spinner.small {
|
||||
position: relative;
|
||||
left: 10px;
|
||||
}
|
||||
.comment-box.empty.cannot-comment {
|
||||
border: 1px solid #dddddd;
|
||||
}
|
||||
.comment-box.cannot-comment .editable,
|
||||
.comment-box.cannot-comment .editable,
|
||||
.comment-box.comment-box.cannot-comment .command,
|
||||
.comment-box.comment-box.cannot-comment .op-link.reply {
|
||||
display: none !important;
|
||||
}
|
||||
.comment-box.empty.cannot-comment .comment-form {
|
||||
margin: 0;
|
||||
}
|
||||
.comment-box.empty.cannot-comment .comment-box-ft {
|
||||
background: #ffffff;
|
||||
}
|
||||
.comment-box.empty.cannot-comment .comment-box-ft,
|
||||
.comment-box .comment-box-ft {
|
||||
position: relative;
|
||||
margin-top: 0px;
|
||||
}
|
||||
.comment-box .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
float: left;
|
||||
}
|
||||
.comment-box .message {
|
||||
margin-top: 24px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: #F7F8F9;
|
||||
color: #9d9e9f;
|
||||
}
|
||||
.comment-item {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
outline: 0;
|
||||
padding: 15px 0;
|
||||
border-bottom: solid 1px #f1f2f3;
|
||||
}
|
||||
.item-highlight * {
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.comment-item {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
}
|
||||
.comment-item > .avatar-link {
|
||||
float: left;
|
||||
margin: 4px 0 0;
|
||||
}
|
||||
.comment-item > .comment-body {
|
||||
margin: 0 0 0 60px;
|
||||
}
|
||||
.comment-item .comment-content {
|
||||
min-height: 22px;
|
||||
font-size: 15px;
|
||||
word-wrap: break-word;
|
||||
padding: 5px 0;
|
||||
}
|
||||
.comment-item .comment-hd,
|
||||
.comment-item .comment-ft {
|
||||
color: #9d9e9f;
|
||||
}
|
||||
.comment-item .comment-hd .desc,
|
||||
.comment-item .comment-ft .desc {
|
||||
font-size: 15px;
|
||||
}
|
||||
.comment-item .comment-ft {
|
||||
font-size: 15px;
|
||||
}
|
||||
.comment-item .op-link {
|
||||
color: #9d9e9f;
|
||||
font-size: 15px;
|
||||
margin-left: 12px;
|
||||
}
|
||||
.comment-item .op-link {
|
||||
visibility: hidden;
|
||||
}
|
||||
@media screen and (max-width: 420px) {
|
||||
.comment-item .op-link .icon {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.comment-item .like-num {
|
||||
float: right;
|
||||
}
|
||||
.comment-item .like-num.nil {
|
||||
display: none;
|
||||
}
|
||||
.comment-item:hover .op-link {
|
||||
visibility: visible;
|
||||
}
|
||||
.comment-form.comment-reply-form {
|
||||
padding: 20px 0;
|
||||
}
|
||||
.comment-form .row {
|
||||
margin: 0;
|
||||
}
|
||||
.comment-form .editable {
|
||||
padding: 6px 12px;
|
||||
font-size: 16px;
|
||||
min-height: 18px;
|
||||
line-height: 26px;
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
color: #222;
|
||||
cursor: text;
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05) inset;
|
||||
background: #e6eaed;
|
||||
color: #747f8c;
|
||||
}
|
||||
#commentForm {
|
||||
border-top: solid 1px #f1f2f3;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.comment-form .editable:focus {
|
||||
outline: none;
|
||||
border: 1px solid #cccccc;
|
||||
}
|
||||
.comment-form > .command {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 0;
|
||||
text-align: right;
|
||||
}
|
||||
.comment-form > .command .save {
|
||||
float: right;
|
||||
}
|
||||
.comment-form > .command .cancel {
|
||||
color: #9d9e9f;
|
||||
vertical-align: -7px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.comment-form.expanded .command {
|
||||
display: block;
|
||||
}
|
||||
.comment-form > .avatar + .editable {
|
||||
margin-left: 60px;
|
||||
}
|
||||
#comments {
|
||||
padding: 0;
|
||||
}
|
||||
#comments form {
|
||||
display: none;
|
||||
}
|
||||
@media screen and (max-width: 600px) {
|
||||
.comment-form {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px;
|
||||
}
|
||||
}
|
||||
.btn-zan {
|
||||
border-radius: 50px;
|
||||
}
|
||||
.btn-weibo {
|
||||
border-radius: 50px;
|
||||
color: #d44137;
|
||||
border-color: #d44137;
|
||||
}
|
||||
.btn-weibo:hover {
|
||||
color: #fff;
|
||||
background: #d44137;
|
||||
}
|
||||
.btn-weixin {
|
||||
color: #38ad5a;
|
||||
border-color: #38ad5a;
|
||||
border-radius: 50px;
|
||||
}
|
||||
.btn-weixin:hover {
|
||||
color: #fff;
|
||||
background: #38ad5a;
|
||||
}
|
||||
.reply-comment-btn {
|
||||
width: 100px;
|
||||
}
|
||||
.avatar-wrap {
|
||||
float: left;
|
||||
}
|
||||
.editor-wrap {
|
||||
margin-left: 60px;
|
||||
}
|
||||
#weixinQRCode {
|
||||
text-align: center;
|
||||
}
|
||||
.report-form ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.report-form .options > li {
|
||||
list-style: none;
|
||||
display: block;
|
||||
line-height: 2;
|
||||
color: #666768;
|
||||
}
|
||||
.report-form .options input {
|
||||
margin-right: 10px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
.footnote {
|
||||
color: red;
|
||||
}
|
||||
#moreComments {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
.needLogin {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
.needLogin a {
|
||||
font-size: 18px;
|
||||
}
|
||||
375
public/css/blog/comment.less
Normal file
375
public/css/blog/comment.less
Normal file
@ -0,0 +1,375 @@
|
||||
|
||||
.entry-controls {
|
||||
text-align: right;
|
||||
padding-top: 20px;
|
||||
margin-top: 20px;
|
||||
margin-bottom: 10px;
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
.entry-controls .right-section {
|
||||
float: right;
|
||||
color: #9d9e9f;
|
||||
a {
|
||||
color: #9d9e9f;
|
||||
}
|
||||
}
|
||||
.post-menu-button {
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
.ui-menu-button {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: pointer;
|
||||
}
|
||||
.entry-controls .control-item {
|
||||
margin-left: 15px;
|
||||
color: #9d9e9f;
|
||||
font-size: 15px;
|
||||
opacity: 1;
|
||||
-webkit-transition: all .05s ease-in-out;
|
||||
-moz-transition: all .05s ease-in-out;
|
||||
-o-transition: all .05s ease-in-out;
|
||||
transition: all .05s ease-in-out;
|
||||
}
|
||||
|
||||
.vote-section-wrapper {
|
||||
display: inline-block;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.entry-controls .voters {
|
||||
display: block;
|
||||
margin-top: 52px;
|
||||
height: 25px;
|
||||
clear: both;
|
||||
}
|
||||
.entry-controls .voters .more-voters, .entry-controls .voters .voter {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
position: relative;
|
||||
margin: 0 8px 8px 0;
|
||||
float: left;
|
||||
}
|
||||
.entry-controls .voters .voter>img {
|
||||
float: left;
|
||||
}
|
||||
.avatar-small {
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
//------
|
||||
.comment-box {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-size: 16px;
|
||||
a {
|
||||
font-size: 16px;
|
||||
}
|
||||
}
|
||||
.comment-box .box-header {
|
||||
border-top: 1px solid #f1f2f3;
|
||||
font-size: 15px;
|
||||
color: #9d9e9f;
|
||||
padding: 30px 0 10px;
|
||||
position: relative
|
||||
}
|
||||
|
||||
.comment-box .box-header .icon {
|
||||
margin-right: 8px;
|
||||
vertical-align: -3px
|
||||
}
|
||||
|
||||
.comment-box .box-header a.comment-options {
|
||||
margin-left: 10px
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.comment-box .box-header {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px
|
||||
}
|
||||
}
|
||||
|
||||
.comment-box .load-more {
|
||||
height: 26px;
|
||||
margin-top: 15px;
|
||||
padding-top: 24px;
|
||||
text-align: center;
|
||||
font-size: 15px;
|
||||
border-top: solid 1px #f1f2f3
|
||||
}
|
||||
|
||||
.comment-box .load-more a {
|
||||
color: #9d9e9f
|
||||
}
|
||||
|
||||
.comment-box .ui-spinner {
|
||||
margin: 0 auto
|
||||
}
|
||||
|
||||
.comment-box .ui-spinner.small {
|
||||
position: relative;
|
||||
left: 10px
|
||||
}
|
||||
|
||||
.comment-box.empty.cannot-comment {
|
||||
border: 1px solid #ddd
|
||||
}
|
||||
|
||||
.comment-box.cannot-comment .editable,.comment-box.cannot-comment .editable,.comment-box.comment-box.cannot-comment .command,
|
||||
.comment-box.comment-box.cannot-comment .op-link.reply {
|
||||
display: none!important
|
||||
}
|
||||
|
||||
.comment-box.empty.cannot-comment .comment-form {
|
||||
margin: 0
|
||||
}
|
||||
|
||||
.comment-box.empty.cannot-comment .comment-box-ft {
|
||||
background: #fff
|
||||
}
|
||||
|
||||
.comment-box.empty.cannot-comment .comment-box-ft,.comment-box .comment-box-ft {
|
||||
position: relative;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.comment-box .avatar {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border-radius: 20px;
|
||||
float: left
|
||||
}
|
||||
|
||||
.comment-box .message {
|
||||
margin-top: 24px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
text-align: center;
|
||||
background: #F7F8F9;
|
||||
color: #9d9e9f
|
||||
}
|
||||
|
||||
.comment-item {
|
||||
position: relative;
|
||||
list-style: none;
|
||||
outline: 0;
|
||||
padding: 15px 0;
|
||||
border-bottom: solid 1px #f1f2f3;
|
||||
}
|
||||
.item-highlight * {
|
||||
border-radius: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.comment-item {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px
|
||||
}
|
||||
}
|
||||
|
||||
.comment-item>.avatar-link {
|
||||
float: left;
|
||||
margin: 4px 0 0
|
||||
}
|
||||
|
||||
.comment-item>.comment-body {
|
||||
margin: 0 0 0 60px
|
||||
}
|
||||
|
||||
.comment-item .comment-content {
|
||||
min-height: 22px;
|
||||
font-size: 15px;
|
||||
word-wrap: break-word;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.comment-item .comment-hd,.comment-item .comment-ft {
|
||||
color: #9d9e9f
|
||||
}
|
||||
|
||||
.comment-item .comment-hd .desc,.comment-item .comment-ft .desc {
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
.comment-item .comment-ft {
|
||||
font-size: 15px
|
||||
}
|
||||
|
||||
.comment-item .op-link {
|
||||
color: #9d9e9f;
|
||||
font-size: 15px;
|
||||
margin-left: 12px
|
||||
}
|
||||
|
||||
.comment-item .op-link {
|
||||
visibility: hidden
|
||||
}
|
||||
|
||||
@media screen and (max-width:420px) {
|
||||
.comment-item .op-link .icon {
|
||||
display: none
|
||||
}
|
||||
}
|
||||
|
||||
.comment-item .like-num {
|
||||
float: right
|
||||
}
|
||||
|
||||
.comment-item .like-num.nil {
|
||||
display: none
|
||||
}
|
||||
|
||||
.comment-item:hover .op-link {
|
||||
visibility: visible
|
||||
}
|
||||
|
||||
.comment-form {
|
||||
}
|
||||
|
||||
.comment-form.comment-reply-form {
|
||||
padding: 20px 0
|
||||
}
|
||||
|
||||
.comment-form .row {
|
||||
margin: 0;
|
||||
}
|
||||
.comment-form .editable {
|
||||
padding: 6px 12px;
|
||||
font-size: 16px;
|
||||
min-height: 18px;
|
||||
line-height: 26px;
|
||||
white-space: pre-wrap;
|
||||
width: 100%;
|
||||
color: #222;
|
||||
cursor: text;
|
||||
border: 1px solid #DDD;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 1px 2px rgba(0,0,0,.05) inset;
|
||||
background: #e6eaed;
|
||||
color: #747f8c;
|
||||
}
|
||||
|
||||
#commentForm {
|
||||
border-top: solid 1px #f1f2f3;
|
||||
padding: 10px 0;
|
||||
}
|
||||
|
||||
.comment-form .editable:focus {
|
||||
outline: none;
|
||||
border: 1px solid #ccc
|
||||
}
|
||||
|
||||
.comment-form>.command {
|
||||
display: none;
|
||||
margin-top: 20px;
|
||||
padding-bottom: 0;
|
||||
text-align: right
|
||||
}
|
||||
|
||||
.comment-form>.command .save {
|
||||
float: right
|
||||
}
|
||||
|
||||
.comment-form>.command .cancel {
|
||||
color: #9d9e9f;
|
||||
vertical-align: -7px;
|
||||
margin-right: 10px
|
||||
}
|
||||
|
||||
.comment-form.expanded .command {
|
||||
display: block
|
||||
}
|
||||
|
||||
.comment-form>.avatar+.editable {
|
||||
margin-left: 60px
|
||||
}
|
||||
|
||||
#comments {
|
||||
padding: 0;
|
||||
form {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width:600px) {
|
||||
.comment-form {
|
||||
padding-left: 17px;
|
||||
padding-right: 17px
|
||||
}
|
||||
}
|
||||
|
||||
.btn-zan {
|
||||
border-radius: 50px;
|
||||
}
|
||||
|
||||
.btn-weibo {
|
||||
border-radius: 50px;
|
||||
color: #d44137;
|
||||
border-color: #d44137;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #d44137;
|
||||
}
|
||||
}
|
||||
.btn-weixin {
|
||||
color: #38ad5a;
|
||||
border-color: #38ad5a;
|
||||
border-radius: 50px;
|
||||
&:hover {
|
||||
color: #fff;
|
||||
background: #38ad5a;
|
||||
}
|
||||
}
|
||||
.reply-comment-btn {
|
||||
width: 100px;
|
||||
}
|
||||
|
||||
.avatar-wrap {
|
||||
float: left;
|
||||
}
|
||||
.editor-wrap {
|
||||
margin-left: 60px;
|
||||
}
|
||||
#weixinQRCode {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
// report
|
||||
.report-form {
|
||||
ul {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
.report-form .options>li {
|
||||
list-style: none;
|
||||
display: block;
|
||||
line-height: 2;
|
||||
color: #666768;
|
||||
}
|
||||
.report-form .options input {
|
||||
margin-right: 10px;
|
||||
vertical-align: 1px;
|
||||
}
|
||||
.footnote {
|
||||
color: red;
|
||||
}
|
||||
|
||||
#moreComments {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.needLogin {
|
||||
padding: 20px 0;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
a {
|
||||
font-size: 18px;
|
||||
}
|
||||
border-top: 1px solid #f1f2f3;
|
||||
}
|
||||
157
public/css/blog/mobile.less
Normal file
157
public/css/blog/mobile.less
Normal file
@ -0,0 +1,157 @@
|
||||
|
||||
@green: #65bd77;
|
||||
@bgColor: #FBFCF7;
|
||||
@media screen and (max-width:600px) {
|
||||
html, body {
|
||||
overflow-x: hidden;
|
||||
background-color: @bgColor;
|
||||
}
|
||||
* {
|
||||
font-size: 16px;
|
||||
}
|
||||
#headerContainer, #footerContainer {
|
||||
background-color: @bgColor;
|
||||
margin: 10px 0;
|
||||
}
|
||||
#posts .each-post, #postsContainer {
|
||||
background-color: @bgColor !important;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
#posts .each-post {
|
||||
padding: 10px;
|
||||
.title {
|
||||
font-size: 24px;
|
||||
border-left: 5px solid @green;
|
||||
padding-left: 10px;
|
||||
font-weight: bold;
|
||||
padding: 5px 0;
|
||||
padding-left: 10px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.container {
|
||||
padding-right: 10px;
|
||||
padding-left: 10px;
|
||||
}
|
||||
.created-time {
|
||||
display: none;
|
||||
}
|
||||
.mobile-created-time {
|
||||
display: block;
|
||||
#userLogo {
|
||||
display: inline-block;
|
||||
max-height: 40px;
|
||||
width: 40px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
}
|
||||
#content {
|
||||
margin-top: 10px;
|
||||
}
|
||||
.right-section {
|
||||
// 只留下举报
|
||||
.dropdown, .btn {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
#blogNav {
|
||||
left: initial !important;
|
||||
right: 10px !important;
|
||||
}
|
||||
|
||||
#postsContainer .container, #footerContainer .container {
|
||||
max-width: 100%;
|
||||
}
|
||||
#postsContainer {
|
||||
margin: 0 !important;
|
||||
max-width: 100%;
|
||||
padding-top:10px;
|
||||
background: #f5f5f5 url("../../images/noise.png");
|
||||
}
|
||||
#posts {
|
||||
max-width: 100% !important;
|
||||
}
|
||||
|
||||
#footerContainer #footer {
|
||||
a {
|
||||
padding: 3px;
|
||||
}
|
||||
a:hover, a:focus {
|
||||
color: @green;
|
||||
}
|
||||
}
|
||||
|
||||
#headerAndNav {
|
||||
position: initial;
|
||||
text-align: left;
|
||||
width: 100%;
|
||||
border-bottom: 2px dashed #ebeff2;
|
||||
#headerContainer {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
padding-top: 30px;
|
||||
}
|
||||
#header {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
h1 {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.navbar-collapse {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
#blogDesc {
|
||||
border: none;
|
||||
margin-top: 20px;
|
||||
font-size: 24px;
|
||||
}
|
||||
.navbar-brand {
|
||||
display: inline-block;
|
||||
line-height: 50px;
|
||||
padding: 0;
|
||||
padding-left: 10px;
|
||||
img {
|
||||
height: 40px;
|
||||
}
|
||||
}
|
||||
.navbar .container {
|
||||
width: auto;
|
||||
padding: 0 15px;
|
||||
}
|
||||
.navbar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
right: 0;
|
||||
left: 0;
|
||||
background: @bgColor;
|
||||
z-index: 1000;
|
||||
border-bottom: 1px solid #DEDDDF;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04), inset 0 1px 0 #ffffff;
|
||||
background-color: #FDFFF5; // #fafbfc;
|
||||
}
|
||||
.navbar-nav {
|
||||
margin: 0 10px;
|
||||
a {
|
||||
padding-left: 10px;
|
||||
border-radius: 5px;
|
||||
}
|
||||
}
|
||||
#search {
|
||||
width: 100%;
|
||||
margin: 10px;
|
||||
}
|
||||
.navbar-form {
|
||||
border: none;
|
||||
}
|
||||
.navbar-default .navbar-nav > .active > a {
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
#myTab, .tab-content {
|
||||
padding: 0 10px;
|
||||
}
|
||||
}
|
||||
@ -120,6 +120,7 @@ a:hover {
|
||||
height: auto;
|
||||
margin-top: 3px;
|
||||
border-color: #ccc;
|
||||
float: right;
|
||||
}
|
||||
#keywords:focus {
|
||||
outline: none;
|
||||
@ -154,7 +155,7 @@ a:hover {
|
||||
}
|
||||
.thumbnails {
|
||||
padding: 0;
|
||||
margin: 35px 0 0;
|
||||
margin: 25px 0 0;
|
||||
}
|
||||
.thumbnails > li {
|
||||
position: relative;
|
||||
@ -163,13 +164,20 @@ a:hover {
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px dashed #d9d9d9;
|
||||
}
|
||||
a:hover {
|
||||
color: #2a6496;
|
||||
}
|
||||
.article .title {
|
||||
padding-right: 40px;
|
||||
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;
|
||||
@ -178,6 +186,7 @@ a:hover {
|
||||
}
|
||||
.article .article-info {
|
||||
margin-top: 5px;
|
||||
color: #999999;
|
||||
}
|
||||
.article .article-info a {
|
||||
color: #999999;
|
||||
@ -185,7 +194,7 @@ a:hover {
|
||||
.article .article-info > a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.article .avatar {
|
||||
.avatar {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
@ -196,7 +205,7 @@ a:hover {
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.article .avatar img {
|
||||
.avatar img {
|
||||
max-height: 32px;
|
||||
border: 2px solid white;
|
||||
-webkit-border-radius: 50%;
|
||||
@ -236,3 +245,94 @@ a:hover {
|
||||
#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;
|
||||
}
|
||||
|
||||
@ -134,6 +134,7 @@ a:hover {
|
||||
height: auto;
|
||||
margin-top: 3px;
|
||||
border-color: #ccc;
|
||||
float: right;
|
||||
}
|
||||
#keywords:focus {
|
||||
outline: none;
|
||||
@ -173,7 +174,7 @@ a:hover {
|
||||
// 文章列表
|
||||
.thumbnails {
|
||||
padding: 0;
|
||||
margin: 35px 0 0;
|
||||
margin: 25px 0 0;
|
||||
}
|
||||
.thumbnails > li {
|
||||
position: relative;
|
||||
@ -182,13 +183,20 @@ a:hover {
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 1px dashed #d9d9d9;
|
||||
}
|
||||
a:hover {
|
||||
color: #2a6496;
|
||||
}
|
||||
.article {
|
||||
.title {
|
||||
padding-right: 40px;
|
||||
display: inline-block;
|
||||
margin-right: 40px;
|
||||
color: #3b3b3b;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
line-height: 36px;
|
||||
&:hover {
|
||||
color: #2a6496;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
color: #717171;
|
||||
@ -198,41 +206,45 @@ a:hover {
|
||||
}
|
||||
.article-info {
|
||||
margin-top: 5px;
|
||||
color: #999999;
|
||||
a {
|
||||
color: #999999;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
.article-info>a {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.avatar {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.avatar {
|
||||
position: absolute;
|
||||
top: 1px;
|
||||
right: 1px;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
overflow: hidden;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
max-height: 32px;
|
||||
border: 2px solid white;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
img {
|
||||
max-height: 32px;
|
||||
border: 2px solid white;
|
||||
-webkit-border-radius: 50%;
|
||||
-moz-border-radius: 50%;
|
||||
border-radius: 50%;
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: border-color 0.3s !important;
|
||||
-moz-transition: border-color 0.3s !important;
|
||||
-ms-transition: border-color 0.3s !important;
|
||||
-o-transition: border-color 0.3s !important;
|
||||
transition: border-color 0.3s !important;
|
||||
}
|
||||
-webkit-box-sizing: border-box;
|
||||
-moz-box-sizing: border-box;
|
||||
box-sizing: border-box;
|
||||
-webkit-transition: border-color 0.3s !important;
|
||||
-moz-transition: border-color 0.3s !important;
|
||||
-ms-transition: border-color 0.3s !important;
|
||||
-o-transition: border-color 0.3s !important;
|
||||
transition: border-color 0.3s !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
#pagination {
|
||||
text-align: center;
|
||||
ul {
|
||||
@ -253,4 +265,103 @@ a:hover {
|
||||
a {
|
||||
color: #ccc;
|
||||
}
|
||||
}
|
||||
|
||||
#navbarUser {
|
||||
a {
|
||||
color: #666;
|
||||
}
|
||||
float: right;
|
||||
line-height: 50px;
|
||||
margin-right: 10px;
|
||||
.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;
|
||||
.keywords-info, .keywords-title {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
font-size: 18px;
|
||||
}
|
||||
.keywords-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
.clear-search {
|
||||
display: inline-block;
|
||||
color: #a94442;
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user