1146 lines
16 KiB
SCSS
1146 lines
16 KiB
SCSS
/*
|
|
* Solo - A small and beautiful blogging system written in Java.
|
|
* Copyright (c) 2010-present, b3log.org
|
|
*
|
|
* This program is free software: you can redistribute it and/or modify
|
|
* it under the terms of the GNU Affero General Public License as published by
|
|
* the Free Software Foundation, either version 3 of the License, or
|
|
* (at your option) any later version.
|
|
*
|
|
* This program is distributed in the hope that it will be useful,
|
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of
|
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
|
|
* GNU Affero General Public License for more details.
|
|
*
|
|
* You should have received a copy of the GNU Affero General Public License
|
|
* along with this program. If not, see <https://www.gnu.org/licenses/>.
|
|
*/
|
|
@charset "utf-8";
|
|
/*
|
|
* skin metro-hot style
|
|
*
|
|
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
|
* @version 2.3.0.0, Jul 17, 2019
|
|
*/
|
|
@import "../../../scss/toc";
|
|
@import "../../../scss/usite";
|
|
@import "../../../scss/function";
|
|
@import "vditor/src/assets/scss/classic";
|
|
|
|
.vditor-reset pre > code {
|
|
background-color: rgba(255, 255, 255, 0.04);
|
|
}
|
|
|
|
.user__site {
|
|
svg {
|
|
height: 14px;
|
|
width: 14px;
|
|
fill: currentColor;
|
|
}
|
|
}
|
|
|
|
/* start base */
|
|
@font-face {
|
|
font-family: 'IcoMoon';
|
|
src: url('font/IcoMoon.eot');
|
|
src: url('font/IcoMoon.eot?#iefix') format('embedded-opentype'),
|
|
url('font/IcoMoon.svg#IcoMoon') format('svg'),
|
|
url('font/IcoMoon.woff') format('woff'),
|
|
url('font/IcoMoon.ttf') format('truetype');
|
|
font-weight: normal;
|
|
font-style: normal;
|
|
}
|
|
|
|
/* Use the following CSS code if you want to use data attributes for inserting your icos */
|
|
[data-ico]:before {
|
|
font-family: 'IcoMoon';
|
|
content: attr(data-ico);
|
|
speak: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
-ms-text-size-adjust: 100%;
|
|
}
|
|
|
|
body {
|
|
font-family: Verdana, arial, '\5fae\8f6f\96c5\9ed1';
|
|
font-size: 12px;
|
|
background-color: #292929;
|
|
margin: 0;
|
|
color: #D1D2D1;
|
|
}
|
|
|
|
a {
|
|
outline: 0;
|
|
text-decoration: none;
|
|
color: #BDBEBD;
|
|
}
|
|
|
|
a:hover {
|
|
color: #FFF;
|
|
}
|
|
|
|
a:focus {
|
|
color: #9E0B0E !important;
|
|
}
|
|
|
|
sub,
|
|
sup {
|
|
position: relative;
|
|
font-size: 70%;
|
|
line-height: 0;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
sup {
|
|
top: -0.5em;
|
|
}
|
|
|
|
sub {
|
|
bottom: -0.25em;
|
|
}
|
|
|
|
img {
|
|
max-width: 100%;
|
|
vertical-align: middle;
|
|
border: 0;
|
|
-ms-interpolation-mode: bicubic;
|
|
}
|
|
|
|
button,
|
|
input,
|
|
select,
|
|
textarea {
|
|
margin: 0;
|
|
font-size: 100%;
|
|
vertical-align: middle;
|
|
font-family: '\5fae\8f6f\96c5\9ed1';
|
|
outline: none;
|
|
}
|
|
|
|
button,
|
|
input {
|
|
line-height: normal;
|
|
}
|
|
|
|
button::-moz-focus-inner,
|
|
input::-moz-focus-inner {
|
|
padding: 0;
|
|
border: 0;
|
|
}
|
|
|
|
button,
|
|
input[type="button"],
|
|
input[type="reset"],
|
|
input[type="submit"] {
|
|
cursor: pointer;
|
|
-webkit-appearance: button;
|
|
}
|
|
|
|
input[type="search"] {
|
|
-webkit-box-sizing: content-box;
|
|
-moz-box-sizing: content-box;
|
|
box-sizing: content-box;
|
|
-webkit-appearance: textfield;
|
|
}
|
|
|
|
input[type="search"]::-webkit-search-decoration,
|
|
input[type="search"]::-webkit-search-cancel-button {
|
|
-webkit-appearance: none;
|
|
}
|
|
|
|
textarea {
|
|
overflow: auto;
|
|
vertical-align: top;
|
|
}
|
|
|
|
::selection {
|
|
background-color: #D5D5D5;
|
|
color: #FCFCFC;
|
|
}
|
|
|
|
::-moz-selection {
|
|
background-color: #D5D5D5;
|
|
color: #FCFCFC;
|
|
}
|
|
|
|
.fn-clear:before,
|
|
.fn-clear:after {
|
|
display: table;
|
|
content: "";
|
|
}
|
|
|
|
.fn-clear:after {
|
|
clear: both;
|
|
}
|
|
|
|
.fn-left {
|
|
float: left;
|
|
}
|
|
|
|
.fn-right {
|
|
float: right;
|
|
}
|
|
|
|
.fn-none {
|
|
display: none;
|
|
}
|
|
|
|
.fn-ellipsis {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
word-wrap: normal;
|
|
}
|
|
|
|
.footer a:hover,
|
|
.article-relative a:hover,
|
|
.article-abstract .article-title a:hover,
|
|
.article-abstract .article-tags a:hover,
|
|
.vditor-reset a {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.vditor-reset a:hover {
|
|
text-decoration: none;
|
|
}
|
|
|
|
/* end base */
|
|
|
|
/* start frame */
|
|
.wrapper {
|
|
height: auto;
|
|
margin: 30px auto 10px;
|
|
width: 1190px;
|
|
}
|
|
|
|
.footer {
|
|
background-color: #141414;
|
|
color: #FFF;
|
|
padding: 30px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
.main {
|
|
float: left;
|
|
width: 920px;
|
|
}
|
|
|
|
/* end frame */
|
|
|
|
/* start header */
|
|
.header {
|
|
position: relative;
|
|
}
|
|
|
|
.header .title {
|
|
color: #E61E1E;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.header .title:hover {
|
|
color: #CA1B1E;
|
|
}
|
|
|
|
.header .title > span:before {
|
|
color: inherit;
|
|
}
|
|
|
|
.top-info {
|
|
font-size: 38px;
|
|
height: 46px;
|
|
line-height: 46px;
|
|
}
|
|
|
|
.top-info > hr {
|
|
background-color: #7B7B7B;
|
|
border: 0 none;
|
|
display: inline-block;
|
|
height: 42px;
|
|
margin: 2px 10px;
|
|
padding: 0;
|
|
vertical-align: top;
|
|
width: 1px;
|
|
}
|
|
|
|
.top-info a {
|
|
color: #FFF;
|
|
}
|
|
|
|
.top-info a:hover {
|
|
color: #CA1B1E;
|
|
}
|
|
|
|
#showTop {
|
|
display: none;
|
|
}
|
|
|
|
.sub-nav {
|
|
background-color: #E61E1E;
|
|
color: #FFF;
|
|
padding: 30px;
|
|
margin: 30px 0;
|
|
}
|
|
|
|
.sub-nav > h2 {
|
|
float: left;
|
|
margin: 0;
|
|
}
|
|
|
|
.pagination {
|
|
float: right;
|
|
margin-top: 5px;
|
|
}
|
|
|
|
.pagination > a,
|
|
.pagination > span {
|
|
background-color: #EA4040;
|
|
color: #FFF;
|
|
padding: 6px 7px;
|
|
text-align: center;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pagination > a:hover,
|
|
.pagination > span {
|
|
color: #E61E1E;
|
|
background-color: #FFF;
|
|
}
|
|
|
|
.navigation {
|
|
background-color: #FFF;
|
|
border: 2px solid #BABABA;
|
|
left: 0;
|
|
list-style: none outside none;
|
|
margin: 0;
|
|
min-width: 223px;
|
|
padding: 0;
|
|
position: absolute;
|
|
top: 63px;
|
|
z-index: 1;
|
|
display: none;
|
|
}
|
|
|
|
.navigation a {
|
|
background-color: #FFF;
|
|
border-bottom: 1px solid #BABABA;
|
|
color: #333;
|
|
display: block;
|
|
padding: 10px 15px;
|
|
}
|
|
|
|
.navigation a:hover {
|
|
background-color: #E61E1E;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.navigation a.lats {
|
|
border-bottom-width: 0;
|
|
}
|
|
|
|
.navigation .page-icon {
|
|
float: left;
|
|
height: 14px;
|
|
width: 14px;
|
|
margin: 2px 5px 0 0;
|
|
}
|
|
|
|
/* end header */
|
|
|
|
/* start article list */
|
|
.main .pagination {
|
|
float: none;
|
|
padding: 20px 0 25px;
|
|
text-align: right;
|
|
margin-right: 10px;
|
|
line-height: 34px;
|
|
}
|
|
|
|
.article-list > div {
|
|
background-color: #323232;
|
|
float: left;
|
|
height: 220px;
|
|
margin: 5px 10px 5px 0;
|
|
overflow: hidden;
|
|
position: relative;
|
|
width: 450px;
|
|
}
|
|
|
|
.article-abstract {
|
|
background-color: #3E3E3E;
|
|
opacity: 0.9;
|
|
filter: alpha(opacity=90);
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
transition: all 1.2s;
|
|
height: 100%;
|
|
}
|
|
|
|
.article-image {
|
|
top: 151px;
|
|
}
|
|
|
|
.article-list > div:hover .article-image {
|
|
top: 0;
|
|
}
|
|
|
|
.article-list > div > img {
|
|
max-width: 100%;
|
|
transition: all 1.2s;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.article-list > div:hover > img {
|
|
transform: scale(1.2);
|
|
}
|
|
|
|
.article-date {
|
|
float: left;
|
|
margin: 10px;
|
|
}
|
|
|
|
.article-title {
|
|
height: 24px;
|
|
line-height: 24px;
|
|
margin: 0 10px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
width: 430px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.article-title span {
|
|
color: #E61E1E;
|
|
}
|
|
|
|
.article-title a {
|
|
color: #F8F7F7;
|
|
}
|
|
|
|
.article-title sup {
|
|
color: #9E0B0E;
|
|
}
|
|
|
|
.article-abstract .fn-right {
|
|
display: none;
|
|
position: absolute;
|
|
right: 0;
|
|
}
|
|
|
|
.article-abstract:hover .fn-right {
|
|
display: block;
|
|
}
|
|
|
|
.article-abstract .fn-right > a {
|
|
background-color: #FFF;
|
|
color: #E61E1E;
|
|
float: left;
|
|
padding: 10px;
|
|
transition: all 0.8s;
|
|
}
|
|
|
|
.article-abstract .fn-right > a:hover {
|
|
color: #FFF;
|
|
background-color: #E61E1E;
|
|
}
|
|
|
|
.article-abstract > .article-tags {
|
|
margin: 10px 0 0 10px;
|
|
}
|
|
|
|
.article-abstract > .vditor-reset {
|
|
margin: 10px;
|
|
overflow: hidden;
|
|
white-space: inherit;
|
|
word-wrap: break-word;
|
|
padding: 10px;
|
|
height: 95px;
|
|
}
|
|
|
|
/* end article list */
|
|
|
|
/* start side */
|
|
.side {
|
|
float: right;
|
|
width: 240px;
|
|
}
|
|
|
|
#search {
|
|
background-color: #FFF;
|
|
border: 0 none;
|
|
color: #3A3A3A;
|
|
height: 50px;
|
|
margin-top: 5px;
|
|
padding: 0 10px;
|
|
width: 177px;
|
|
transition: all 0.3s ease-out 0s;
|
|
}
|
|
|
|
.side form > span {
|
|
background-color: #FFF;
|
|
color: #3A3A3A;
|
|
float: right;
|
|
font-size: 25px;
|
|
height: 32px;
|
|
margin-top: 5px;
|
|
padding: 9px;
|
|
}
|
|
|
|
.side-tile {
|
|
color: #FFF;
|
|
float: left;
|
|
margin-top: 20px;
|
|
padding: 15px 25px 15px 25px;
|
|
position: relative;
|
|
background-color: #F09609;
|
|
width: 65px;
|
|
transition: all 0.3s ease-out 0s;
|
|
}
|
|
|
|
.side-tile:hover,
|
|
.side form input:focus,
|
|
.form input:focus,
|
|
.form textarea:focus,
|
|
.form button:hover,
|
|
#dynamic .footer:hover {
|
|
outline: 3px solid #BABABA;
|
|
}
|
|
|
|
.side-tile > span {
|
|
display: block;
|
|
font-size: 60px;
|
|
text-align: center;
|
|
width: 60px;;
|
|
}
|
|
|
|
.side-tile > .title {
|
|
line-height: 17px;
|
|
}
|
|
|
|
.side-tile > .text {
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
left: 93px;
|
|
line-height: 30px;
|
|
position: absolute;
|
|
top: 20px;
|
|
}
|
|
|
|
.side-tile > .text a {
|
|
color: #FFF;
|
|
}
|
|
|
|
.online-count,
|
|
.user,
|
|
.notice-board,
|
|
.share,
|
|
.article-relative {
|
|
width: 188px;
|
|
}
|
|
|
|
.translate,
|
|
.logout,
|
|
.prev,
|
|
.prev-disabled {
|
|
margin-left: 10px;
|
|
}
|
|
|
|
.translate {
|
|
background-color: #2E8BCC;
|
|
}
|
|
|
|
.settings {
|
|
background-color: #008641;
|
|
}
|
|
|
|
.logout,
|
|
.register {
|
|
background-color: #7B4F9D;
|
|
}
|
|
|
|
.next,
|
|
.prev {
|
|
background-color: #E61E1E;
|
|
}
|
|
|
|
.next-disabled,
|
|
.prev-disabled {
|
|
color: #BDBEBD;
|
|
background-color: #EA4040;
|
|
}
|
|
|
|
.user {
|
|
background-color: #393;
|
|
}
|
|
|
|
.user img {
|
|
margin: 0 10px 10px 0;
|
|
height: 60px;
|
|
width: 60px;
|
|
}
|
|
|
|
.online-count,
|
|
.share {
|
|
background-color: #20608E;
|
|
}
|
|
|
|
.share div.text {
|
|
color: #BDBEBD;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
left: 128px;
|
|
line-height: 54px;
|
|
top: 5px;
|
|
width: 105px;
|
|
|
|
.icon-wechat {
|
|
position: relative;
|
|
|
|
canvas {
|
|
position: absolute;
|
|
right: 43px;
|
|
top: -17px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.share .text span:hover {
|
|
cursor: pointer;
|
|
color: #FFF;
|
|
}
|
|
|
|
.online-count .text,
|
|
.article-relative .text {
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
left: 104px;
|
|
line-height: 19px;
|
|
text-align: left;
|
|
top: 12px;
|
|
}
|
|
|
|
.article-relative .text {
|
|
left: 70px;
|
|
overflow: hidden;
|
|
top: 10px;
|
|
white-space: nowrap;
|
|
width: 158px;
|
|
word-break: keep-all;
|
|
}
|
|
|
|
.article-relative .text ul {
|
|
margin: 0;
|
|
}
|
|
|
|
.notice-board {
|
|
background-color: #2E8BCC;
|
|
overflow: hidden;
|
|
height: auto;
|
|
}
|
|
|
|
.user .text {
|
|
top: 27px;
|
|
}
|
|
|
|
/* end side */
|
|
|
|
/* start others */
|
|
#goCmt,
|
|
#goTop {
|
|
background-color: #141414;
|
|
bottom: 10px;
|
|
font-size: 30px;
|
|
height: 35px;
|
|
padding: 5px 7px;
|
|
position: fixed;
|
|
right: 30px;
|
|
width: 30px;
|
|
z-index: 10;
|
|
}
|
|
|
|
#goCmt {
|
|
bottom: 55px;
|
|
}
|
|
|
|
.archives {
|
|
background-color: #323232;
|
|
padding: 10px;
|
|
margin: 5px 10px 30px 0;
|
|
}
|
|
|
|
.archives li {
|
|
list-style: none;
|
|
float: left;
|
|
}
|
|
|
|
.archives a {
|
|
background-color: #E61E1E;
|
|
color: #FFF;
|
|
line-height: 15px;
|
|
float: left;
|
|
margin: 10px;
|
|
padding: 10px 15px;
|
|
white-space: nowrap;
|
|
transition: all 0.8s;
|
|
}
|
|
|
|
.archives a:hover {
|
|
background-color: #FFF;
|
|
color: #E61E1E;
|
|
}
|
|
|
|
/* end others */
|
|
|
|
/* start article */
|
|
.article-header {
|
|
background-color: #E61E1E;
|
|
margin: 30px 0;
|
|
padding: 20px 30px;
|
|
position: relative;
|
|
}
|
|
|
|
.article-info {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 0;
|
|
}
|
|
|
|
.article-info > a {
|
|
background-color: #FFF;
|
|
color: #E61E1E;
|
|
transition: all 0.8s;
|
|
font-size: 14px;
|
|
float: left;
|
|
padding: 14px;
|
|
border-bottom: 1px solid #FFF;
|
|
border-left: 1px solid #FFF;
|
|
}
|
|
|
|
.article-info > a:hover {
|
|
background-color: #E61E1E;
|
|
color: #FFF;
|
|
}
|
|
|
|
.article-header h2 {
|
|
color: #FFF;
|
|
}
|
|
|
|
.article-header h2 > span {
|
|
font-weight: normal;
|
|
color: #D1D2D1;
|
|
}
|
|
|
|
.article-header .article-date {
|
|
float: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.vditor-reset {
|
|
background-color: #323232;
|
|
margin-bottom: 30px;
|
|
overflow: hidden;
|
|
padding: 10px;
|
|
white-space: normal;
|
|
word-break: break-all;
|
|
font-size: 14px;
|
|
word-wrap: break-word;
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.main > .vditor-reset {
|
|
margin-right: 10px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
pre.prettyprint {
|
|
background-color: #F7F7F7;
|
|
}
|
|
|
|
/* end article */
|
|
|
|
/* start comment */
|
|
#comments {
|
|
position: relative;
|
|
}
|
|
|
|
#comments > div {
|
|
margin-bottom: 20px;
|
|
margin-right: 10px;
|
|
}
|
|
|
|
#comments > div.fn-clear > img {
|
|
width: 80px;
|
|
}
|
|
|
|
#comments .vditor-reset {
|
|
margin: 10px 0;
|
|
width: 800px;
|
|
}
|
|
|
|
#comments .user-name {
|
|
color: #E61E1E;
|
|
font-weight: bold;
|
|
}
|
|
|
|
#comments .user-name:hover {
|
|
color: #CA1B1E;
|
|
}
|
|
|
|
.comment-info a {
|
|
color: #F8F7F7;
|
|
}
|
|
|
|
.at {
|
|
font-size: 15px;
|
|
color: #FFF;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.comment-main {
|
|
float: right;
|
|
}
|
|
|
|
.comment-body-ref {
|
|
background-color: #EA4040;
|
|
left: 79px;
|
|
padding: 10px;
|
|
position: absolute;
|
|
width: 900px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.comment-disabled {
|
|
background-color: #EA4040;
|
|
color: #FFFFFF;
|
|
margin: 0 10px 30px 0;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
.form {
|
|
width: 600px;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.form input,
|
|
.form textarea {
|
|
height: 30px;
|
|
margin: 5px 10px 5px 0;
|
|
padding: 0 5px;
|
|
transition: all 0.3s ease-out 0s;
|
|
width: 456px;
|
|
}
|
|
|
|
.form textarea {
|
|
width: 600px;
|
|
height: 300px;
|
|
margin: 0 0 10px;
|
|
}
|
|
|
|
.form button {
|
|
background-color: #E61E1E;
|
|
border: 0 none;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
font-size: 15px;
|
|
transition: all 0.3s ease-out 0s;
|
|
padding: 10px 50px;
|
|
}
|
|
|
|
.tip {
|
|
color: #CA1B1E;
|
|
}
|
|
|
|
/* end comment */
|
|
|
|
/* start dynamic */
|
|
#dynamic #comments {
|
|
background-color: #EA4040;
|
|
margin-top: 5px;
|
|
padding: 25px 15px 15px 25px;
|
|
}
|
|
|
|
#dynamic #comments .vditor-reset {
|
|
width: 743px;
|
|
}
|
|
|
|
#dynamic .article-relative .text {
|
|
left: 110px;
|
|
}
|
|
|
|
#dynamic .footer {
|
|
margin: 20px 0 10px;
|
|
float: left;
|
|
transition: all 0.3s ease-out 0s;
|
|
}
|
|
|
|
.most-comment,
|
|
.most-view,
|
|
.links-tile,
|
|
.tags-tile {
|
|
position: static;
|
|
background-color: #F09609;
|
|
width: 535px;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.most-view {
|
|
margin-left: 20px;
|
|
background-color: #2E8BCC;
|
|
}
|
|
|
|
.tags-tile {
|
|
margin-left: 20px;
|
|
background-color: #339933;
|
|
}
|
|
|
|
.links-tile {
|
|
background-color: #7B4F9D;
|
|
}
|
|
|
|
.tags-tile span,
|
|
.links-tile span,
|
|
.most-comment span,
|
|
.most-view span {
|
|
font-size: 60px;
|
|
}
|
|
|
|
.tags-tile .text,
|
|
.links-tile .text,
|
|
.most-comment .text,
|
|
.most-view .text {
|
|
position: static;
|
|
width: 430px;
|
|
}
|
|
|
|
.tags-tile a,
|
|
.links-tile a {
|
|
background-color: #EA4040;
|
|
color: #D1D2D1;
|
|
float: left;
|
|
font-size: 12px;
|
|
line-height: 20px;
|
|
margin: 6px;
|
|
padding: 5px 10px;
|
|
transition: all 0.8s ease 0s;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.tags-tile a:hover,
|
|
.links-tile a:hover {
|
|
background-color: #FFF;
|
|
color: #EA4040;
|
|
}
|
|
|
|
.most-comment .text,
|
|
.most-view .text {
|
|
margin-right: 20px;
|
|
line-height: 24px;
|
|
}
|
|
|
|
.most-comment .text a:hover,
|
|
.most-view .text a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.most-comment .text span,
|
|
.most-view .text span {
|
|
color: #D1D2D1;
|
|
font-size: 13px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
/* end dynamic */
|
|
|
|
@media (max-width: 860px) and (min-width: 460px) {
|
|
.fn__flex {
|
|
display: block;
|
|
}
|
|
.wrapper {
|
|
width: 720px;
|
|
}
|
|
|
|
.main {
|
|
width: 460px;
|
|
}
|
|
|
|
.form {
|
|
width: auto;
|
|
}
|
|
|
|
.form input {
|
|
width: 395px;
|
|
}
|
|
|
|
.form textarea {
|
|
width: 434px;
|
|
}
|
|
|
|
#comments .vditor-reset {
|
|
width: 340px;
|
|
}
|
|
|
|
#dynamic #comments .vditor-reset {
|
|
width: 283px;
|
|
}
|
|
|
|
.tags-tile,
|
|
.links-tile,
|
|
.archives-tile,
|
|
.most-comment,
|
|
.most-view {
|
|
width: 670px;
|
|
}
|
|
|
|
.tags-tile .text,
|
|
.links-tile .text,
|
|
.archives-tile .text,
|
|
.most-comment .text,
|
|
.most-view .text {
|
|
width: 580px;
|
|
}
|
|
|
|
.links-tile,
|
|
.tags-tile,
|
|
.most-view {
|
|
margin-left: 0;
|
|
}
|
|
}
|
|
|
|
@media (max-width: 460px) {
|
|
.fn__flex {
|
|
display: block;
|
|
}
|
|
.side,
|
|
.top-info,
|
|
.header > .fn-left,
|
|
.comment-main {
|
|
float: none;
|
|
}
|
|
|
|
.wrapper,
|
|
.article-list > div,
|
|
.main,
|
|
.side {
|
|
width: 300px;
|
|
}
|
|
|
|
.sub-nav > .pagination,
|
|
.footer,
|
|
#comments > div > img {
|
|
display: none;
|
|
}
|
|
|
|
#search {
|
|
width: 237px;
|
|
}
|
|
|
|
.side-tile {
|
|
width: 94px;
|
|
}
|
|
|
|
.online-count,
|
|
.user,
|
|
.notice-board,
|
|
.share,
|
|
.article-relative {
|
|
width: 249px;
|
|
}
|
|
|
|
.main .pagination,
|
|
.main > .vditor-reset,
|
|
.comment-disabled,
|
|
#comments > div {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.side > div,
|
|
#comments .vditor-reset {
|
|
position: static !important;
|
|
width: auto !important;
|
|
}
|
|
|
|
.share div.text {
|
|
left: 173px;
|
|
}
|
|
|
|
.form {
|
|
width: auto;
|
|
}
|
|
|
|
.form input {
|
|
width: 240px;
|
|
}
|
|
|
|
.form textarea {
|
|
width: 285px;
|
|
height: 150px;
|
|
}
|
|
|
|
#dynamic .main {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.tags-tile {
|
|
margin-bottom: 50px;
|
|
}
|
|
|
|
.article-title {
|
|
width: 280px;
|
|
}
|
|
|
|
.archives {
|
|
margin-right: 0;
|
|
}
|
|
|
|
.article-info > a {
|
|
padding: 3px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
#dynamic #comments {
|
|
padding-left: 15px;
|
|
}
|
|
|
|
.tags-tile .title,
|
|
.links-tile .title,
|
|
.most-comment .title,
|
|
.most-view .title {
|
|
float: right;
|
|
font-size: 15px;
|
|
font-weight: bold;
|
|
margin: 20px 0 0 40px;
|
|
}
|
|
|
|
.most-comment,
|
|
.most-view {
|
|
width: 249px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.most-comment .text,
|
|
.most-view .text {
|
|
margin-right: 0;
|
|
width: 274px;
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
}
|
|
|
|
.tags-tile,
|
|
.links-tile {
|
|
width: 249px;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.tags-tile .text,
|
|
.links-tile .text {
|
|
width: 249px;
|
|
}
|
|
} |