➕ Add a new skin (iMobile)
This commit is contained in:
iTanken
431
iMobile/搜索页面（覆盖至根目录）/css/default-init.css
Normal file
431
iMobile/搜索页面（覆盖至根目录）/css/default-init.css
Normal file
@@ -0,0 +1,431 @@
|
||||
/**
|
||||
* Copyright (c) 2010-2017, b3log.org & hacpai.com
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
/**
|
||||
* 403, 404, 500, article-pwd, init, login and kill-browser page style.
|
||||
*
|
||||
* @author <a href="http://vanessa.b3log.org">Liyuan Li</a>
|
||||
* @author <a href="http://88250.b3log.org">Liang Ding</a>
|
||||
* @version 1.1.0.0, Sep 12, 2017
|
||||
*/
|
||||
html,body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
body {
|
||||
background-color: #fff;
|
||||
color: #333;
|
||||
font-family: \5fae\8f6f\96c5\9ed1;
|
||||
font-size: small;
|
||||
}
|
||||
h2 {
|
||||
border-radius: 4px 4px 0 0;
|
||||
font-size: 16px;
|
||||
margin: 0;
|
||||
padding: 10px 20px;
|
||||
text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
input {
|
||||
border: 1px solid #CCCCCC;
|
||||
border-radius: 3px 3px 3px 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset;
|
||||
font-size: 13px;
|
||||
margin: 15px 0;
|
||||
padding: 7px 8px;
|
||||
vertical-align: middle;
|
||||
width: 410px;
|
||||
font-family: \5fae\8f6f\96c5\9ed1;
|
||||
font-size: small;
|
||||
}
|
||||
input:focus {
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.075) inset, 0 0 5px rgbargba(200, 200, 200, 0.9);
|
||||
border: 1px solid #E6E5D9;
|
||||
}
|
||||
.form {
|
||||
padding: 20px;
|
||||
}
|
||||
label {
|
||||
font-size: 13px;
|
||||
}
|
||||
button {
|
||||
position:relative;
|
||||
display:inline-block;
|
||||
font-size:13px;
|
||||
font-weight:700;
|
||||
color:#333;
|
||||
text-shadow:0 1px 0 rgba(255,255,255,0.9);
|
||||
white-space:nowrap;
|
||||
background-color:#eaeaea;
|
||||
background-image:linear-gradient(#fafafa,#eaeaea);
|
||||
background-repeat:repeat-x;
|
||||
border-radius:3px;
|
||||
border:1px solid #ddd;
|
||||
border-bottom-color:#c5c5c5;
|
||||
box-shadow:0 1px 3px rgba(0,0,0,0.075);
|
||||
vertical-align:baseline;
|
||||
cursor:pointer;
|
||||
-webkit-touch-callout:none;
|
||||
-webkit-user-select:none;
|
||||
-khtml-user-select:none;
|
||||
-moz-user-select:none;
|
||||
-ms-user-select:none;
|
||||
user-select:none;
|
||||
-webkit-appearance:none;
|
||||
outline:none;
|
||||
padding:7px 15px;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
button:hover,
|
||||
button:active {
|
||||
color:#fff;
|
||||
text-decoration:none;
|
||||
text-shadow:0 -1px 0 rgba(0,0,0,0.25);
|
||||
background-color: #3072b3;
|
||||
background-image:linear-gradient(#599bcd,#3072b3);
|
||||
background-repeat:repeat-x;
|
||||
}
|
||||
|
||||
.clear {
|
||||
background-color: transparent;
|
||||
border: 0px;
|
||||
clear: both;
|
||||
display: block;
|
||||
font-size: 0px;
|
||||
height: 0px;
|
||||
line-height: 0px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.fn-clear:before,
|
||||
.fn-clear:after {
|
||||
display: table;
|
||||
content: ""
|
||||
}
|
||||
.fn-clear:after {
|
||||
clear: both
|
||||
}
|
||||
.fn-left {
|
||||
float: left
|
||||
}
|
||||
|
||||
.fn-right {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.none {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.solo {
|
||||
color: orangered;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.logo {
|
||||
float: left;
|
||||
padding: 142px 12px 0;
|
||||
width: 217px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wrap {
|
||||
border-top: 5px solid #E6E5D9;
|
||||
padding: 110px 0;
|
||||
background-color: #F3F1E5;
|
||||
}
|
||||
|
||||
.content {
|
||||
background-color: #fff;
|
||||
margin: 0 auto;
|
||||
width: 760px;
|
||||
}
|
||||
|
||||
.main {
|
||||
border-left: 1px solid #E6E5D9;
|
||||
float: right;
|
||||
font-size: 15px;
|
||||
padding: 20px;
|
||||
width: 470px;
|
||||
min-height: 360px;
|
||||
}
|
||||
|
||||
.main a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.main li {
|
||||
margin: 6px 0 6px 16px;
|
||||
}
|
||||
|
||||
.footerWrapper {
|
||||
position: fixed; bottom: 0; width: 100%; margin-top: 100px;
|
||||
background-color: #FFFFFF; border-top: 1px solid #E6E5D9;
|
||||
padding: 12px 0; text-align: center; font-size: 12px;
|
||||
}
|
||||
|
||||
.footerWrapper a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
/* start article-pwd */
|
||||
.article-pwd > div,
|
||||
.article-pwd > form {
|
||||
margin: 0 20px;
|
||||
}
|
||||
|
||||
.article-pwd > div {
|
||||
margin-bottom: 10px;
|
||||
max-height: 264px;
|
||||
overflow: auto;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
/* end article-pwd */
|
||||
|
||||
/* start 403/404/500 */
|
||||
.a-error {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.img-error {
|
||||
max-width: 100%;
|
||||
margin: 20px auto;
|
||||
padding: 0;
|
||||
display: block;
|
||||
}
|
||||
/* end 403/404/500 */
|
||||
|
||||
/* start kill */
|
||||
.kill img {
|
||||
position: absolute;
|
||||
right: 40px;
|
||||
top: 200px;
|
||||
}
|
||||
|
||||
.kill ul {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
|
||||
.kill p {
|
||||
margin: 12px 20px;
|
||||
}
|
||||
|
||||
.kill span {
|
||||
margin-left: 20px;
|
||||
}
|
||||
/* end kill */
|
||||
|
||||
/* start init */
|
||||
#init {
|
||||
position: absolute;
|
||||
width: 470px;
|
||||
}
|
||||
|
||||
#init input,
|
||||
.register input {
|
||||
margin: 5px 0;
|
||||
padding: 5px 8px;
|
||||
}
|
||||
|
||||
.register {
|
||||
height: 400px;
|
||||
}
|
||||
|
||||
#sys p {
|
||||
height: 206px;
|
||||
}
|
||||
|
||||
#sys {
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
#initButton {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
#tip {
|
||||
color: #21759B;
|
||||
font-weight: bold;
|
||||
margin-left: 10px;
|
||||
}
|
||||
/* end init */
|
||||
|
||||
/* start search */
|
||||
.content-reset {
|
||||
font-family: "Helvetica Neue", "Luxi Sans", "DejaVu Sans", Tahoma, "Hiragino Sans GB", "Microsoft Yahei", sans-serif;
|
||||
word-wrap: break-word;
|
||||
overflow: auto;
|
||||
line-height: 1.5;
|
||||
font-size: 13px;
|
||||
word-break: break-all;
|
||||
color: #545454;
|
||||
}
|
||||
|
||||
.content-reset ul,
|
||||
.content-reset ol {
|
||||
padding-left: 2em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 16px
|
||||
}
|
||||
.content-reset li {
|
||||
margin-top: 0.25em
|
||||
}
|
||||
.content-reset h1,
|
||||
.content-reset h2,
|
||||
.content-reset h3,
|
||||
.content-reset h4,
|
||||
.content-reset h5,
|
||||
.content-reset h6 {
|
||||
margin-top: 24px;
|
||||
margin-bottom: 16px;
|
||||
font-weight: 600;
|
||||
line-height: 1.25
|
||||
}
|
||||
.content-reset h1 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 2em;
|
||||
border-bottom: 1px solid #eee
|
||||
}
|
||||
.content-reset h2 {
|
||||
padding-bottom: 0.3em;
|
||||
font-size: 1.5em;
|
||||
border-bottom: 1px solid #eee
|
||||
}
|
||||
.content-reset h3 {
|
||||
font-size: 1.25em
|
||||
}
|
||||
.content-reset h4 {
|
||||
font-size: 1em
|
||||
}
|
||||
.content-reset h5 {
|
||||
font-size: 0.875em
|
||||
}
|
||||
.content-reset h6 {
|
||||
font-size: 0.85em
|
||||
}
|
||||
.content-reset hr {
|
||||
height: 2px;
|
||||
padding: 0;
|
||||
margin: 5px 0;
|
||||
background-color: #e7e7e7;
|
||||
border: 0
|
||||
}
|
||||
.content-reset p {
|
||||
margin-top: 0;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
.content-reset blockquote {
|
||||
padding: 0 1em;
|
||||
color: #777;
|
||||
border-left: 0.25em solid #ddd;
|
||||
margin-bottom: 16px
|
||||
}
|
||||
.content-reset blockquote p {
|
||||
margin: 0
|
||||
}
|
||||
.content-reset iframe {
|
||||
border: 1px solid #ccc
|
||||
}
|
||||
.content-reset table {
|
||||
width: 100%;
|
||||
border: 1px solid #dedede;
|
||||
margin: 15px auto;
|
||||
border-collapse: collapse;
|
||||
empty-cells: show
|
||||
}
|
||||
.content-reset thead {
|
||||
text-align: center
|
||||
}
|
||||
.content-reset td,
|
||||
.content-reset th {
|
||||
height: 35px;
|
||||
border: 1px solid #dedede;
|
||||
padding: 0 10px
|
||||
}
|
||||
.content-reset th {
|
||||
font-weight: bold;
|
||||
text-align: center !important;
|
||||
background: rgba(158, 188, 226, 0.2)
|
||||
}
|
||||
.content-reset tbody tr:nth-child(2n) {
|
||||
background: rgba(158, 188, 226, 0.12)
|
||||
}
|
||||
.content-reset tr:hover {
|
||||
background: #efefef
|
||||
}
|
||||
.content-reset code {
|
||||
padding: 0.2em 0.4em;
|
||||
margin: 0;
|
||||
font-size: 85%;
|
||||
background-color: rgba(252, 41, 41, 0.12);
|
||||
border-radius: 3px;
|
||||
color: #d23f31;
|
||||
font-family: mononoki, Consolas, "Liberation Mono", Menlo, Courier, monospace
|
||||
}
|
||||
.content-reset pre>code {
|
||||
padding: 0.5em;
|
||||
border-radius: 0;
|
||||
color: #333;
|
||||
background-color: rgba(0, 0, 0, 0.04);
|
||||
background-size: 20px 20px;
|
||||
border-radius: 5px
|
||||
}
|
||||
.content-reset kbd {
|
||||
display: inline-block;
|
||||
padding: 3px 5px;
|
||||
font: 11px Consolas, "Liberation Mono", Menlo, Courier, monospace;
|
||||
line-height: 10px;
|
||||
color: #555;
|
||||
vertical-align: middle;
|
||||
background-color: #fcfcfc;
|
||||
border: solid 1px #ccc;
|
||||
border-bottom-color: #bbb;
|
||||
border-radius: 3px;
|
||||
box-shadow: inset 0 -1px 0 #bbb
|
||||
}
|
||||
|
||||
.search { padding-bottom: 110px; border-top: 5px solid #e6e5d9; }
|
||||
.search__header { padding: 15px 20px; position: fixed; top: 0; width: 100%; z-index: 9; background: #efefef; border-bottom: 3px solid #e6e5d9; }
|
||||
.search__header a { line-height: 44px; }
|
||||
.search__input input { margin: 0 10px 0 20px; height: 32px; line-height: 32px; float: left; font-size: 16px; padding: 5px 10px; }
|
||||
.search__input button { height: 44px; margin: 0; float: left; }
|
||||
.search__articles { padding: 0 50px; margin-top: 80px; }
|
||||
.search__articles article { border-bottom: 3px solid #e6e5d9; }
|
||||
.search__articles header h1 { margin: 0; }
|
||||
.search__articles header h1 > a { font-size: 18px; text-decoration: none; font-weight: normal; }
|
||||
.search__articles .meta { font-size: 14px; color: #999; }
|
||||
.search__articles footer { margin-bottom: 30px; }
|
||||
.search__articles footer a { text-decoration: none; font-size: 13px; }
|
||||
.search__articles footer a:hover,.search__articles header h1 > a:hover,.search__pagination a:hover { text-decoration: underline; }
|
||||
.search__pagination a { color: #4285f4; text-decoration: none; }
|
||||
.search__pagination a,.search__pagination span { margin-right: 5px; }
|
||||
/* end search */
|
||||
|
||||
/* start responsive */
|
||||
@media (max-width: 780px) {
|
||||
.wrap { padding: 40px 0; }
|
||||
.content { width: auto; }
|
||||
.logo, .search__header img { width: 32px; }
|
||||
.search__header > .fn-right { display: none; }
|
||||
.main { border: 0; float: none; width: auto; }
|
||||
input { width: 100%; box-sizing: border-box; display: block; }
|
||||
.a-500, .a-403, .a-404 { margin: 0 20px 0 0; }
|
||||
#init { width: 100%; padding: 0 20px; box-sizing: border-box; left: 0; }
|
||||
.search__input { float: none; }
|
||||
.search__input button { position: absolute; right: 50px; height: 32px; line-height: 16px; }
|
||||
.search { width: 100%; min-height: auto; box-sizing: border-box; }
|
||||
.search__articles { width: auto; min-width: auto; padding: 0; margin-top: 70px; }
|
||||
}
|
||||
/* end responsive */
|
||||
622
iMobile/搜索页面（覆盖至根目录）/css/search.css
Normal file
622
iMobile/搜索页面（覆盖至根目录）/css/search.css
Normal file
@@ -0,0 +1,622 @@
|
||||
html {
|
||||
height: 100%; max-height: 100%; font-size: 16px; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
body {
|
||||
max-height: 100%; line-height: 1.5em;
|
||||
font-family: "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
|
||||
font-size: 100%; letter-spacing: 0.01rem; margin: 0;
|
||||
color: rgba(0, 0, 0, 0.6); background-color: #eaeaea;
|
||||
-webkit-font-feature-settings: 'kern' 1; -moz-font-feature-settings: 'kern' 1; -o-font-feature-settings: 'kern' 1;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
::-moz-selection {
|
||||
background: #D6EDFF;
|
||||
}
|
||||
::selection {
|
||||
background: #D6EDFF;
|
||||
}
|
||||
a {
|
||||
text-decoration: none;
|
||||
outline-width: 0;
|
||||
color: #258fb8;
|
||||
outline: none;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
h1, h2, h3, h4, h5, h6 {
|
||||
-webkit-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
-o-font-feature-settings: 'dlig' 1, 'liga' 1, 'lnum' 1, 'kern' 1;
|
||||
color: #666;
|
||||
line-height: 1.15em;
|
||||
font-family: "Open Sans", "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
h1 {
|
||||
letter-spacing: -2px;
|
||||
text-indent: -3px;
|
||||
}
|
||||
h2 {
|
||||
letter-spacing: -1px;
|
||||
}
|
||||
img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
p, ul, ol, dl {
|
||||
-webkit-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-moz-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
-o-font-feature-settings: 'liga' 1, 'onum' 1, 'kern' 1;
|
||||
text-rendering: geometricPrecision;
|
||||
}
|
||||
|
||||
ol, ul {
|
||||
padding-left: 3rem;
|
||||
}
|
||||
|
||||
ol ol, ul ul,
|
||||
ul ol, ol ul {
|
||||
padding-left: 2em;
|
||||
}
|
||||
|
||||
dl dt {
|
||||
float: left;
|
||||
width: 180px;
|
||||
overflow: hidden;
|
||||
clear: left;
|
||||
text-align: right;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-weight: 700;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
dl dd {
|
||||
margin-left: 200px;
|
||||
margin-bottom: 1em
|
||||
}
|
||||
|
||||
li li {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
hr {
|
||||
display: block;
|
||||
height: 1px;
|
||||
border: 0;
|
||||
border-top: #EFEFEF 1px solid;
|
||||
margin: 3.2em 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
box-sizing: border-box;
|
||||
margin: 1.75em 0 1.75em 0;
|
||||
padding: 0 0 0 1.75em;
|
||||
border-left: 5px solid;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
|
||||
blockquote:hover {
|
||||
border-color: #b0a0aa;
|
||||
}
|
||||
|
||||
blockquote p {
|
||||
margin: 0.8em 0;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
blockquote small {
|
||||
display: inline-block;
|
||||
margin: 0.8em 0 0.8em 1.5em;
|
||||
font-size: 0.9em;
|
||||
color: #CCC;
|
||||
}
|
||||
|
||||
blockquote small:before { content: "\2014 \00A0"; }
|
||||
|
||||
blockquote cite {
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
blockquote cite a { font-weight: normal; }
|
||||
|
||||
mark {
|
||||
background-color: #fdffb6;
|
||||
}
|
||||
|
||||
code, tt {
|
||||
padding: 1px 3px;
|
||||
font-family: Inconsolata, monospace, "Helvetica Neue","Luxi Sans","DejaVu Sans",Tahoma,"Hiragino Sans GB","Microsoft Yahei",sans-serif;
|
||||
font-size: 0.85em;
|
||||
white-space: pre-wrap;
|
||||
border: #E3EDF3 1px solid;
|
||||
background: #F7FAFB;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
pre {
|
||||
font-size: 0.9em;
|
||||
}
|
||||
|
||||
pre code, pre tt {
|
||||
font-size: inherit;
|
||||
white-space: pre-wrap;
|
||||
background: transparent;
|
||||
border: none;
|
||||
padding: 0;
|
||||
}
|
||||
/* end reset */
|
||||
|
||||
/* start function */
|
||||
.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;
|
||||
}
|
||||
/* end function */
|
||||
/* start common */
|
||||
@font-face {
|
||||
font-family: 'icomoon';
|
||||
src:url('/skins/mobile/css/fonts/icomoon.eot?3js4w7');
|
||||
src:url('/skins/mobile/css/fonts/icomoon.eot?3js4w7#iefix') format('embedded-opentype'),
|
||||
url('/skins/mobile/css/fonts/icomoon.ttf?3js4w7') format('truetype'),
|
||||
url('/skins/mobile/css/fonts/icomoon.woff?3js4w7') format('woff'),
|
||||
url('/skins/mobile/css/fonts/icomoon.svg?3js4w7#icomoon') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
[class^="icon-"], [class*=" icon-"] {
|
||||
font-family: 'icomoon';
|
||||
speak: none;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
font-variant: normal;
|
||||
text-transform: none;
|
||||
line-height: 1;
|
||||
/* Better Font Rendering =========== */
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.icon-tag:before {
|
||||
content: "\e903";
|
||||
}
|
||||
.icon-date:before {
|
||||
content: "\e902";
|
||||
}
|
||||
#captcha, #captchaReply {
|
||||
height: 27px;
|
||||
display: inline-block;
|
||||
vertical-align: inherit;
|
||||
}
|
||||
/* start emotions */
|
||||
.em00, .em01, .em02, .em03, .em04, .em05, .em06, .em07, .em08, .em09,
|
||||
.em10, .em11, .em12, .em13, .em14 {
|
||||
cursor: pointer;
|
||||
background-image: url("/images/emotions/emotions-classic.png");
|
||||
float: left;
|
||||
height: 24px;
|
||||
margin-right: 5px;
|
||||
width: 24px;
|
||||
transition: all .2s ease-out;
|
||||
-webkit-transition: all .2s ease-out;
|
||||
-moz-transition: all .2s ease-out;
|
||||
}
|
||||
#emotions span:hover {
|
||||
transform: scale(1.2) rotate(360deg);
|
||||
-webkit-transform: scale(1.2) rotate(360deg);
|
||||
-moz-transform: scale(1.2) rotate(360deg);
|
||||
}
|
||||
|
||||
.em01 {
|
||||
background-position: -24px 0;
|
||||
}
|
||||
|
||||
.em02 {
|
||||
background-position: -48px 0;
|
||||
}
|
||||
|
||||
.em03 {
|
||||
background-position: -72px 0;
|
||||
}
|
||||
.em04 {
|
||||
background-position: -96px 0;
|
||||
}
|
||||
|
||||
.em05 {
|
||||
background-position: 0px -24px;
|
||||
}
|
||||
|
||||
.em06 {
|
||||
background-position: -24px -24px;
|
||||
}
|
||||
|
||||
.em07 {
|
||||
background-position: -48px -24px;
|
||||
}
|
||||
|
||||
.em08 {
|
||||
background-position: -72px -24px;
|
||||
}
|
||||
|
||||
.em09 {
|
||||
background-position: -96px -24px;
|
||||
}
|
||||
|
||||
.em10 {
|
||||
background-position: 0 -48px;
|
||||
}
|
||||
|
||||
.em11 {
|
||||
background-position: -24px -48px ;
|
||||
}
|
||||
|
||||
.em12 {
|
||||
background-position: -48px -48px;
|
||||
}
|
||||
|
||||
.em13 {
|
||||
background-position: -72px -48px;
|
||||
}
|
||||
|
||||
.em14 {
|
||||
background-position: -96px -48px;
|
||||
}
|
||||
/* end emotions */
|
||||
|
||||
/* start main */
|
||||
main {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
min-height: 100%;
|
||||
background: #eaeaea;
|
||||
width: auto;
|
||||
}
|
||||
/* end main */
|
||||
|
||||
/* start article */
|
||||
article {
|
||||
margin: 30px;
|
||||
border: 1px solid #ddd;
|
||||
background: #fff;
|
||||
position: relative;
|
||||
transition: all 0.2s ease-in;
|
||||
visibility: hidden;
|
||||
}
|
||||
article.show {
|
||||
visibility: visible;
|
||||
-webkit-animation: bounce 0.6s;
|
||||
animation: bounce 0.6s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes bounce {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-webkit-transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
-webkit-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@-moz-keyframes bounce {
|
||||
0% {
|
||||
opacity: 0;
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
60% {
|
||||
opacity: 1;
|
||||
-moz-transform: scale(1.02);
|
||||
}
|
||||
100% {
|
||||
-moz-transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
article header {
|
||||
border-left: 5px solid;
|
||||
padding: 15px 30px 15px 25px;
|
||||
}
|
||||
|
||||
article header:hover {
|
||||
border-color: #b0a0aa;
|
||||
}
|
||||
|
||||
article header h2 {
|
||||
margin: 0;
|
||||
font-size: 26px;
|
||||
padding-right: 130px;
|
||||
}
|
||||
|
||||
article header a {
|
||||
color: #696969;
|
||||
margin-left: 0px;
|
||||
font-weight: 300;
|
||||
line-height: 35px;
|
||||
}
|
||||
|
||||
article header a:hover {
|
||||
color: #b0a0aa;
|
||||
}
|
||||
|
||||
article header sup {
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
article header .meta {
|
||||
font-size: 14px;
|
||||
position: absolute;
|
||||
right: 30px;
|
||||
color: #aaa;
|
||||
top: 18px;
|
||||
}
|
||||
article header time {
|
||||
white-space: nowrap;
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
article .abstract {
|
||||
line-height: 1.8em;
|
||||
padding-right: 30px;
|
||||
padding-left: 30px;
|
||||
overflow: hidden;
|
||||
word-wrap: break-word
|
||||
}
|
||||
|
||||
article footer {
|
||||
padding: 20px 35px 0 0;
|
||||
margin: 30px 30px 20px 30px;
|
||||
border-top: 1px solid #ddd;
|
||||
}
|
||||
|
||||
.tags .tag:hover,
|
||||
article .abstract a:hover{
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.tags .avatar {
|
||||
width: 20px;
|
||||
border-radius: 10px;
|
||||
right: 30px;
|
||||
position: absolute;
|
||||
bottom: 25px;
|
||||
transition: all 0.2s ease-out 0s;
|
||||
}
|
||||
.tags .avatar:hover,
|
||||
.share span:hover {
|
||||
transform: rotate(360deg);
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tags .tag {
|
||||
color: #fff;
|
||||
font-size: 10px;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
display: inline-block;
|
||||
padding: 0 5px 0px 10px;
|
||||
position: relative;
|
||||
border-radius: 0 5px 5px 0;
|
||||
margin: 5px 9px 5px 8px;
|
||||
background-color: #7b5d5f;
|
||||
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
|
||||
}
|
||||
|
||||
.tags .tag:before {
|
||||
content: " ";
|
||||
width: 0px;
|
||||
height: 0px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -18px;
|
||||
border: 9px solid transparent;
|
||||
border-right-color: #7b5d5f;
|
||||
}
|
||||
|
||||
.tags .tag:after {
|
||||
content: " ";
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.3);
|
||||
position: absolute;
|
||||
top: 7px;
|
||||
left: 2px;
|
||||
}
|
||||
|
||||
a.color1.tag{ background:#999 }
|
||||
a.color1.tag:before{ border-right-color:#999 }
|
||||
|
||||
a.color2.tag{ background:#ccc }
|
||||
a.color2.tag:before{ border-right-color:#ccc }
|
||||
|
||||
a.color3.tag{ background:#666 }
|
||||
a.color3.tag:before{ border-right-color:#666 }
|
||||
|
||||
a.color4.tag { background: #cfb7c4; }
|
||||
a.color4.tag:before { border-right-color: #cfb7c4; }
|
||||
|
||||
nav.pagination {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
nav.pagination .page-num {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
background: #4d4d4d;
|
||||
border-radius: 50%;
|
||||
display: inline-block;
|
||||
color: #fff;
|
||||
line-height: 20px;
|
||||
font-size: 12px;
|
||||
margin: 0 3px 30px;
|
||||
}
|
||||
|
||||
nav.pagination a.page-num:hover {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
|
||||
nav.pagination .page-num.current {
|
||||
background: #88acdb;
|
||||
}
|
||||
|
||||
nav.pagination .extend {
|
||||
color: #4d4d4d;
|
||||
margin: 0 27px;
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
nav.pagination .extend:hover {
|
||||
color: #b0a0aa;
|
||||
}
|
||||
|
||||
nav.pagination:hover .extend {
|
||||
opacity: 1;
|
||||
}
|
||||
/* end article */
|
||||
|
||||
/* start footer */
|
||||
footer.footer {
|
||||
line-height: 1rem;
|
||||
font-size: 12px;
|
||||
font-family: Menlo, Monaco, "Andale Mono", "lucida console", "Courier New", monospace;
|
||||
text-shadow: 0 1px #fff;
|
||||
opacity: 0.6;
|
||||
margin: 0 30px 30px;
|
||||
}
|
||||
|
||||
footer.footer .icon-goup {
|
||||
position: fixed;
|
||||
bottom: 35px;
|
||||
right: 5px;
|
||||
-webkit-animation: upbounce 4s 2s infinite;
|
||||
animation: upbounce 4s 2s infinite;
|
||||
z-index: 10;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
color: #b0a0aa;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
footer.footer .icon-goup:hover {
|
||||
color: #4a4a4a;
|
||||
}
|
||||
|
||||
@-webkit-keyframes upbounce {
|
||||
0%, 10%, 25%, 40%, 50% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
20% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
30% {
|
||||
-webkit-transform: translateY(-5px);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes upbounce {
|
||||
0%, 20%, 50%, 80%, 100% {
|
||||
-webkit-transform: translateY(0);
|
||||
transform: translateY(0);
|
||||
}
|
||||
40% {
|
||||
-webkit-transform: translateY(-10px);
|
||||
transform: translateY(-10px);
|
||||
}
|
||||
60% {
|
||||
-webkit-transform: translateY(-5px);
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
}
|
||||
/* end footer */
|
||||
|
||||
/* start classify*/
|
||||
.classify li {
|
||||
list-style: none;
|
||||
font-size: 20px;
|
||||
float: left;
|
||||
margin: 0 30px 20px 0;
|
||||
}
|
||||
|
||||
.classify .tags .tag {
|
||||
font-size: 20px;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.classify .tags .tag:before {
|
||||
left: -38px;
|
||||
border-width: 19px;
|
||||
}
|
||||
|
||||
.classify .tags .tag:after {
|
||||
top: 15px;
|
||||
left: -6px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
|
||||
.classify-name {
|
||||
font-size: 18px;
|
||||
margin: 30px;
|
||||
}
|
||||
table {width: 100%; border-collapse:collapse; border: 1px solid #ccc;}
|
||||
table th, table td {
|
||||
border: 1px solid #E6E6E6;
|
||||
padding: 3px 5px;
|
||||
word-break: normal;
|
||||
}
|
||||
table th {
|
||||
background: #F3F3F3;
|
||||
}
|
||||
th, td {
|
||||
text-align: left;
|
||||
}
|
||||
/* end classify*/
|
||||
/* start responsive */
|
||||
@media only screen and (max-width: 500px) {
|
||||
main {
|
||||
position: initial;
|
||||
}
|
||||
article {
|
||||
margin: 10px;
|
||||
}
|
||||
footer.footer {
|
||||
text-align: center;
|
||||
}
|
||||
footer.footer .fn-right {
|
||||
float: none;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
/* end responsive */
|
||||
Reference in New Issue
Block a user