From 822bef11b7bc98c288be82f382d75c8f5c7754ee Mon Sep 17 00:00:00 2001 From: Liberxue <5831248+Liberxue@users.noreply.github.com> Date: Wed, 6 Nov 2019 23:57:34 +0800 Subject: [PATCH] [ISSUE #23] fix display of table of content close issue/23 --- style/style-liberxue.css | 2605 ++++++++++++++++++++++++++++++++------ 1 file changed, 2184 insertions(+), 421 deletions(-) diff --git a/style/style-liberxue.css b/style/style-liberxue.css index 06de363..c3c0d39 100644 --- a/style/style-liberxue.css +++ b/style/style-liberxue.css @@ -1,464 +1,2227 @@ @charset 'UTF-8'; - /* ========================================================================== #reset ========================================================================== */ -*{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;margin:0;padding:0;border:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;} -*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;} -html{overflow-x:hidden;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;} -::-moz-selection{color:#fff;background-color:#eb5055;} -::selection{color:#fff;background-color:#eb5055;} -body{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;font-size:14px;line-height:1.8;margin:0 auto;color:#313131;text-rendering:geometricPrecision;-webkit-font-smoothing:antialiased;-webkit-user-select: none;-ms-user-select: none;-moz-user-select: none;-khtml-user-select: none;user-select: none;-moz-osx-font-smoothing:grayscale;} -body>*:first-child{margin-top:0!important;} -body>*:last-child{margin-bottom:0!important;} -p,blockquote,ul,ol,dl,table,pre{margin:20px 0;vertical-align:baseline;} -h1,h2,h3,h4,h5,h6{font-weight: bold;-webkit-font-smoothing:antialiased;-webkit-margin-before: 0.83em;-webkit-margin-after: 0.83em;-webkit-margin-start: 0px;-webkit-margin-end: 0px;font-family: "Abril Fatface", serif;} -h1 tt,h1 code,h2 tt,h2 code,h3 tt,h3 code,h4 tt,h4 code,h5 tt,h5 code,h6 tt,h6 code{font-size:inherit;} -h1{font-size:1.4em;color:#6f7477;} -h2{font-size:1.3em;color:#6F7484;} -h3{font-size:1.2em;color:#333;} -h4{font-size:1.1em;color:#444;} -h5{font-size:1.0em;color:#555;} -h6{font-size:1.0em;color:#555;} -body>h2:first-child,body>h1:first-child,body>h1:first-child+h2,body>h3:first-child,body>h4:first-child,body>h5:first-child,body>h6:first-child{margin-top:0;padding-top:0;} -a:first-child h1,a:first-child h2,a:first-child h3,a:first-child h4,a:first-child h5,a:first-child h6{margin-top:0;padding-top:0;} -a{text-decoration:none;color:#313131;outline:0;} - /* a:active,a:focus,a:hover{color:#eb5055;outline:0;} */ +* { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; + margin: 0; + padding: 0; + border: 0; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +*, :after, :before { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; +} + +html { + overflow-x: hidden; + -ms-text-size-adjust: 100%; + -webkit-text-size-adjust: 100%; +} + +::-moz-selection { + color: #fff; + background-color: #eb5055; +} + +::selection { + color: #fff; + background-color: #eb5055; +} + +body { + font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; + font-size: 14px; + line-height: 1.8; + margin: 0 auto; + color: #313131; + text-rendering: geometricPrecision; + -webkit-font-smoothing: antialiased; + -webkit-user-select: none; + -ms-user-select: none; + -moz-user-select: none; + -khtml-user-select: none; + user-select: none; + -moz-osx-font-smoothing: grayscale; +} + +body > * :first-child { + margin-top: 0 !important; +} + +p, blockquote, ul, ol, dl, table, pre { + margin: 20px 0; + vertical-align: baseline; +} + +h1, h2, h3, h4, h5, h6 { + font-weight: bold; + -webkit-font-smoothing: antialiased; + -webkit-margin-before: 0.83em; + -webkit-margin-after: 0.83em; + -webkit-margin-start: 0px; + -webkit-margin-end: 0px; + font-family: "Abril Fatface", serif; +} + +h1 tt, h1 code, h2 tt, h2 code, h3 tt, h3 code, h4 tt, h4 code, h5 tt, h5 code, h6 tt, h6 code { + font-size: inherit; +} + +h1 { + font-size: 1.4em; + color: #6f7477; +} + +h2 { + font-size: 1.3em; + color: #6F7484; +} + +h3 { + font-size: 1.2em; + color: #333; +} + +h4 { + font-size: 1.1em; + color: #444; +} + +h5 { + font-size: 1.0em; + color: #555; +} + +h6 { + font-size: 1.0em; + color: #555; +} + +body > h2:first-child, body > h1:first-child, body > h1:first-child + h2, body > h3:first-child, body > h4:first-child, body > h5:first-child, body > h6:first-child { + margin-top: 0; + padding-top: 0; +} + +a:first-child h1, a:first-child h2, a:first-child h3, a:first-child h4, a:first-child h5, a:first-child h6 { + margin-top: 0; + padding-top: 0; +} + +a { + text-decoration: none; + color: #313131; + outline: 0; +} + +/* a:active,a:focus,a:hover{color:#eb5055;outline:0;} */ /* a:active,a:focus,a:hover{color:#eb5055;outline:0;} */ -a::before{ +a::before { color: #eb5055; - content: attr(data-hover); + content: attr(data-hover); position: absolute; - outline:0; + outline: 0; white-space: nowrap; opacity: 0; - text-shadow: 0 0 1px rgba(255,255,255,0.3); - -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); - -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); - transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); - -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; - -moz-transition: -moz-transform 0.3s, opacity 0.3s; - transition: transform 0.3s, opacity 0.3s; -} -a:hover::before, -a:focus::before { - outline:0; + text-shadow: 0 0 1px rgba(255, 255, 255, 0.3); + -webkit-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); + -moz-transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); + transform: scale(1.1) translateX(10px) translateY(-10px) rotate(4deg); + -webkit-transition: -webkit-transform 0.3s, opacity 0.3s; + -moz-transition: -moz-transform 0.3s, opacity 0.3s; + transition: transform 0.3s, opacity 0.3s; +} + +a:hover::before, a:focus::before { + outline: 0; white-space: nowrap; - -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); - -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); - transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); - opacity: 1; -} -ul,ol{padding-left:30px;} -ul li>:first-child,ol li>:first-child,ul li ul:first-of-type,ol li ol:first-of-type,ul li ol:first-of-type,ol li ul:first-of-type{margin-top:0;} -li{word-wrap:break-word;} -li p{margin:0;} -ul ul,ul ol,ol ol,ol ul{margin-bottom:0;} -pre{position:relative;margin:20px 0;} -code{ - font-family: "Abril Fatface", serif，Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace; - font-size:13px; + -webkit-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); + -moz-transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); + transform: scale(1) translateX(0px) translateY(0px) rotate(0deg); + opacity: 1; +} + +ul, ol { + padding-left: 30px; +} + +ul li > :first-child, ol li > :first-child, ul li ul:first-of-type, ol li ol:first-of-type, ul li ol:first-of-type, ol li ul:first-of-type { + margin-top: 0; +} + +li { + word-wrap: break-word; +} + +li p { + margin: 0; +} + +ul ul, ul ol, ol ol, ol ul { + margin-bottom: 0; +} + +pre { + position: relative; + margin: 20px 0; +} + +code { + font-family: "Abril Fatface", serif，Menlo, Bitstream Vera Sans Mono, DejaVu Sans Mono, Monaco, Consolas, monospace; + font-size: 13px; background-color: rgb(244, 244, 244); border: 1px solid #eaeaea; border-radius: 2px; color: #716f6f; margin: 0 6px; - } -pre code{display:block;overflow:auto;border:0;} -blockquote{border-left: 2px solid rgba(235, 80, 85, 0.62);position: relative;color: #000;font-size: 1.5rem;background: #f4f4f4;margin: 20px 0;padding: 16px 24px 16px 35px} -blockquote>:first-child{margin-top:0;} -blockquote>:last-child{margin-bottom:0;} -hr{clear:both;overflow:hidden;height:0;margin:15px 0;padding:0;border:0;border-bottom:2px solid #ddd;background:transparent;} -table{font-size:13px;display:block;overflow:auto;width:100%;border-spacing:0;border-collapse:collapse;word-wrap:normal;word-break:normal;} -table th{font-weight:bold;} -table th,table td{padding:6px 13px;white-space:nowrap;border:1px solid #ddd;} -table tr{border-top:1px solid #ccc;background-color:#fff;} -table tr:hover{background-color:#f7f7f7;} -table thead tr{background-color:#f7f7f7;} -button,input,select,textarea{font-family:-apple-system,SF UI Text,Arial,PingFang SC,Hiragino Sans GB,Microsoft YaHei,WenQuanYi Micro Hei,sans-serif;font-size:13px;line-height:1.6;resize:none;} -input:required:invalid,input:focus:invalid,textarea:required:invalid,textarea:focus:invalid{box-shadow:none;} -input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#5f5f5f;} -input:-moz-placeholder,textarea:-moz-placeholder{color:#5f5f5f;} -input::-moz-placeholder,textarea::-moz-placeholder{color:#5f5f5f;} -input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#5f5f5f;} +} + +pre code { + display: block; + overflow: auto; + border: 0; +} + +blockquote { + border-left: 2px solid rgba(235, 80, 85, 0.62); + position: relative; + color: #000; + font-size: 1.5rem; + background: #f4f4f4; + margin: 20px 0; + padding: 16px 24px 16px 35px +} + +blockquote > :first-child { + margin-top: 0; +} + +blockquote > :last-child { + margin-bottom: 0; +} + +hr { + clear: both; + overflow: hidden; + height: 0; + margin: 15px 0; + padding: 0; + border: 0; + border-bottom: 2px solid #ddd; + background: transparent; +} + +table { + font-size: 13px; + display: block; + overflow: auto; + width: 85%; + border-spacing: 0; + border-collapse: collapse; + word-wrap: normal; + word-break: normal; +} + +table th { + font-weight: bold; +} + +table th, table td { + padding: 6px 13px; + white-space: nowrap; + border: 1px solid #ddd; +} + +table tr { + border-top: 1px solid #ccc; + background-color: #fff; +} + +table tr:hover { + background-color: #f7f7f7; +} + +table thead tr { + background-color: #f7f7f7; +} + +button, input, select, textarea { + font-family: -apple-system, SF UI Text, Arial, PingFang SC, Hiragino Sans GB, Microsoft YaHei, WenQuanYi Micro Hei, sans-serif; + font-size: 13px; + line-height: 1.6; + resize: none; +} + +input:required:invalid, input:focus:invalid, textarea:required:invalid, textarea:focus:invalid { + box-shadow: none; +} + +input::-webkit-input-placeholder, textarea::-webkit-input-placeholder { + color: #5f5f5f; +} + +input:-moz-placeholder, textarea:-moz-placeholder { + color: #5f5f5f; +} + +input::-moz-placeholder, textarea::-moz-placeholder { + color: #5f5f5f; +} + +input:-ms-input-placeholder, textarea:-ms-input-placeholder { + color: #5f5f5f; +} /* ========================================================================== #public ========================================================================== */ -.clearfix:after,.clearfix:before{display:table;content:'';} -.clearfix:after{clear:both;} -.clearfix{zoom:1;} -.left{float:left;} -.right{float:right;} -.browsehappy{position:fixed;z-index:999;top:0;bottom:0;width:100%;height:40px;padding:10px;text-align:center;color:#8a1f11;background:#fbe3e4;} -.browsehappy a{font-weight:700;text-decoration:underline;color:#8a1f11;} -.bg-white{background-color:#fff!important;} -.bg-grey{background-color:#fbfdff!important;} -.bg-deepgrey{background-color:rgba(0,0,0,.5)!important;} -.bg-blue{background-color:#6fa3ef!important;} -.bg-purple{background-color:#bc99c4!important;} -.bg-green{background-color:#46c47c!important;} -.bg-yellow{background-color:#f9bb3c!important;} -.bg-red{background-color:#e8583d!important;} -.bg-orange{background-color:#f68e5f!important;} -.MathJax_Display{overflow-x:auto;overflow-y:hidden;} -.MathJax{outline:0;} -.MathJax span{font-size:15px;} -#instantclick-bar {background:#eb5055;} +.clearfix:after, .clearfix:before { + display: table; + content: ''; +} + +.clearfix:after { + clear: both; +} + +.clearfix { + zoom: 1; +} + +.left { + float: left; +} + +.right { + float: right; +} + +.browsehappy { + position: fixed; + z-index: 999; + top: 0; + bottom: 0; + width: 100%; + height: 40px; + padding: 10px; + text-align: center; + color: #8a1f11; + background: #fbe3e4; +} + +.browsehappy a { + font-weight: 700; + text-decoration: underline; + color: #8a1f11; +} + +.bg-white { + background-color: #fff !important; +} + +.bg-grey { + background-color: #fbfdff !important; +} + +.bg-deepgrey { + background-color: rgba(0, 0, 0, .5) !important; +} + +.bg-blue { + background-color: #6fa3ef !important; +} + +.bg-purple { + background-color: #bc99c4 !important; +} + +.bg-green { + background-color: #46c47c !important; +} + +.bg-yellow { + background-color: #f9bb3c !important; +} + +.bg-red { + background-color: #e8583d !important; +} + +.bg-orange { + background-color: #f68e5f !important; +} + +.MathJax_Display { + overflow-x: auto; + overflow-y: hidden; +} + +.MathJax { + outline: 0; +} + +.MathJax span { + font-size: 15px; +} + +#instantclick-bar { + background: #eb5055; +} /* ========================================================================== #icon ========================================================================== */ -.icon-search{position:relative;z-index:1;display:inline-block;width:13px;height:13px;margin:2px 0 0 3px;-webkit-transform:rotate(-45deg);-ms-transform:rotate(-45deg);transform:rotate(-45deg);color:#313131;border:solid 2px currentColor;border-radius:50%;} -.icon-search:before{position:absolute;top:11px;left:3px;width:2px;height:4px;content:'';background-color:currentColor;} -.icon-menu{position:relative;display:inline-block;width:20px;height:12px;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-webkit-transition-timing-function:cubic-bezier(.61,.04,.17,1.32);transition-timing-function:cubic-bezier(.61,.04,.17,1.32);} -.icon-menu .middle{position:absolute;top:50%;left:-.25em;display:inline-block;width:20px;height:2px;margin-top:-1px;-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;background:#313131;} -.icon-menu:after,.icon-menu:before{position:absolute;left:-.25em;width:20px;height:2px;content:'';-webkit-transition:all .4s ease-in-out;transition:all .4s ease-in-out;-webkit-transform-origin:50% 50% 0;-ms-transform-origin:50% 50% 0;transform-origin:50% 50% 0;background:#313131;} -.icon-menu:after{bottom:0;} -.icon-menu:before{top:0;} -.bg-ico-book{background-position:0 0!important;} -.bg-ico-game{background-position:0 -40px!important;} -.bg-ico-note{background-position:0 -80px!important;} -.bg-ico-chat{background-position:0 -120px!important;} -.bg-ico-code{background-position:0 -160px!important;} -.bg-ico-image{background-position:0 -200px!important;} -.bg-ico-web{background-position:0 -240px!important;} -.bg-ico-link{background-position:0 -280px!important;} -.bg-ico-design{background-position:0 -320px!important;} -.bg-ico-lock{background-position:0 -360px!important;} +.icon-search { + position: relative; + z-index: 1; + display: inline-block; + width: 13px; + height: 13px; + margin: 2px 0 0 3px; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + color: #313131; + border: solid 2px currentColor; + border-radius: 50%; +} + +.icon-search:before { + position: absolute; + top: 11px; + left: 3px; + width: 2px; + height: 4px; + content: ''; + background-color: currentColor; +} + +.icon-menu { + position: relative; + display: inline-block; + width: 20px; + height: 12px; + -webkit-transition: all .4s ease-in-out; + transition: all .4s ease-in-out; + -webkit-transition-timing-function: cubic-bezier(.61, .04, .17, 1.32); + transition-timing-function: cubic-bezier(.61, .04, .17, 1.32); +} + +.icon-menu .middle { + position: absolute; + top: 50%; + left: -.25em; + display: inline-block; + width: 20px; + height: 2px; + margin-top: -1px; + -webkit-transition: all .4s ease-in-out; + transition: all .4s ease-in-out; + background: #313131; +} + +.icon-menu:after, .icon-menu:before { + position: absolute; + left: -.25em; + width: 20px; + height: 2px; + content: ''; + -webkit-transition: all .4s ease-in-out; + transition: all .4s ease-in-out; + -webkit-transform-origin: 50% 50% 0; + -ms-transform-origin: 50% 50% 0; + transform-origin: 50% 50% 0; + background: #313131; +} + +.icon-menu:after { + bottom: 0; +} + +.icon-menu:before { + top: 0; +} + +.bg-ico-book { + background-position: 0 0 !important; +} + +.bg-ico-game { + background-position: 0 -40px !important; +} + +.bg-ico-note { + background-position: 0 -80px !important; +} + +.bg-ico-chat { + background-position: 0 -120px !important; +} + +.bg-ico-code { + background-position: 0 -160px !important; +} + +.bg-ico-image { + background-position: 0 -200px !important; +} + +.bg-ico-web { + background-position: 0 -240px !important; +} + +.bg-ico-link { + background-position: 0 -280px !important; +} + +.bg-ico-design { + background-position: 0 -320px !important; +} + +.bg-ico-lock { + background-position: 0 -360px !important; +} /* ========================================================================== #header ========================================================================== */ -.header{line-height:78px;position:fixed;z-index:10;top:0;display:block;width:100%;height:80px;padding:0;text-align:right;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.1);-moz-box-shadow:0 1px 5px rgba(0,0,0,.1);box-shadow:0 1px 5px rgba(0,0,0,.1);} -.header.animated{-webkit-animation-duration:.5s;animation-duration:.5s;-webkit-animation-fill-mode:both;animation-fill-mode:both;} -.header.animated.slideUp{-webkit-animation-name:slideUp;animation-name:slideUp;} -.header.animated.slideDown{-webkit-animation-name:slideDown;animation-name:slideDown;} -.navbar-container{position:relative;width:1040px;max-width:100%;height:80px;margin:0 auto;} -.navbar-logo{font-size:22px;line-height:22px;position:absolute;top:50%;left:0;display:block;width:auto;max-width:50%;height:22px;margin-top:-10px;margin-left:25px;text-decoration:none;} -.navbar-logo img{width: auto;height: 35px;outline: 0;margin: -13px;} -.navbar-menu{z-index:10;display:inline-block;width:auto;padding-right:5px;} -.navbar-menu a{font-size:14px;padding:0 15px;} -.navbar-mobile-menu{line-height:80px;z-index:1;display:none;width:28px;padding:0 45px 0 10px;cursor:pointer;} -.navbar-mobile-menu:active,.navbar-mobile-menu:hover{cursor:pointer;} -.navbar-mobile-menu:active:before,.navbar-mobile-menu:hover:before{-webkit-animation:pointer-ball .3s ease 1;animation:pointer-ball .3s ease 1;-webkit-animation-timing-function:cubic-bezier(.61,.04,.17,1.32);animation-timing-function:cubic-bezier(.61,.04,.17,1.32);} -.navbar-mobile-menu:active .icon-menu,.navbar-mobile-menu:hover .icon-menu{-webkit-transform:rotateZ(360deg);-ms-transform:rotateZ(360deg);transform:rotateZ(360deg);} -.navbar-mobile-menu:active .icon-menu.cross .middle,.navbar-mobile-menu:active .icon-menu.cross:after,.navbar-mobile-menu:active .icon-menu.cross:before,.navbar-mobile-menu:hover .icon-menu.cross .middle,.navbar-mobile-menu:hover .icon-menu.cross:after,.navbar-mobile-menu:hover .icon-menu.cross:before{background:#eb5055;} -.navbar-mobile-menu:active .icon-menu.cross .middle,.navbar-mobile-menu:hover .icon-menu.cross .middle{opacity:0;} -.navbar-mobile-menu:active .icon-menu.cross:after,.navbar-mobile-menu:hover .icon-menu.cross:after{bottom:5px;-webkit-transform:rotate(135deg);-ms-transform:rotate(135deg);transform:rotate(135deg);} -.navbar-mobile-menu:active .icon-menu.cross:before,.navbar-mobile-menu:hover .icon-menu.cross:before{top:5px;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);transform:rotate(45deg);-webkit-box-shadow:0 0 0 white;box-shadow:0 0 0 white;} -.navbar-mobile-menu li{position:relative;display:inline;margin:0;text-decoration:none;} -.navbar-mobile-menu ul{position:absolute;z-index:1;top:100%;overflow:hidden;clip:rect(1px,1px,1px,1px);margin:0 0 0 -95px;padding:0;-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;-webkit-transform:translate(120px,0);-ms-transform:translate(120px,0);transform:translate(120px,0);text-indent:0;} -.navbar-mobile-menu:hover>ul,.navbar-mobile-menu:active>ul,.navbar-mobile-menu:focus>ul{overflow:inherit;clip:inherit;-webkit-transition:-webkit-transform 300ms;transition:-webkit-transform 300ms;transition:transform 300ms;-webkit-transform:translateX(0px) translateY(0px) translateZ(0px);transform:translateX(0px) translateY(0px) translateZ(0px);} -.navbar-mobile-menu ul li a{font-size:15px;line-height:2.2;display:block;width:140px;margin:0;padding:8px 25px;background-color:#eee;} -.navbar-search{line-height:80px;display:inline-block;width:20px;padding:0 40px 0 0;cursor:pointer;} -.navbar-search:hover>form,.navbar-search:active>form,.navbar-search:focus>form{overflow:inherit;clip:inherit;-webkit-transition:opacity 500ms ease-in-out;transition:opacity 500ms ease-in-out;opacity:1;} -.navbar-search:hover>.icon-search,.navbar-search:active>.icon-search,.navbar-search:focus>.icon-search{color:#eb5055;} -.navbar-search form{line-height:30px;position:absolute;top:50%;right:0;display:block;overflow:hidden;clip:rect(1px,1px,1px,1px);width:auto;max-width:60%;height:30px;margin-top:-15px;padding-right:10px;opacity:0;} -.navbar-search form .search-box{line-height:30px;position:relative;top:-1px;display:inline-block;width:400px;max-width:100%;height:30px;padding:0;border:none;border-radius:3px;} -.navbar-search form .search-box input{font-size:14px;line-height:30px;position:absolute;top:0;left:0;width:100%;height:30px;padding:0 40px 0 18px;color:#313131;border:1px solid #eb5055;border-radius:20px;outline:0;background-color:#fff;-webkit-appearance:none;} -.navbar-search form .search-box ul{font-size:14px;line-height:50px;color:#eb5055;background-color:#fff;z-index: 9999;text-align: center; -webkit-box-shadow: 0 1px 5px rgba(0,0,0,.1); --moz-box-shadow: 0 1px 5px rgba(0,0,0,.1);box-shadow: 0 1px 5px rgba(0,0,0,.1);border-radius: 0.50rem;} -.navbar-search form .search-box ul li{z-index: 9999;text-align: center;overflow:hidden;text-overflow:ellipsis; -o-text-overflow:ellipsis;white-space:nowrap;width:100%;} +.header { + line-height: 78px; + position: fixed; + z-index: 10; + top: 0; + display: block; + width: 100%; + height: 80px; + padding: 0; + text-align: right; + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + box-shadow: 0 1px 5px rgba(0, 0, 0, .1); +} -/* ========================================================================== - #main content - ========================================================================== */ -.main-content{position:relative;max-width: 1024px;margin:0 auto;-webkit-animation:fade-in .5s;animation:fade-in;animation-duration:.5s;} -.index-page{padding:120px 20px 0;} -.index-page .post-list-item-container .item-label{padding:10px 20px 40px;} -.post-lists{position:relative;display:block;overflow:hidden;} -.post-lists-body{display:block;} -.post-list-item{float:left;width:33.3333%;height:auto;padding:18px;align-items:center;} -.post-list-item-container{position:relative;overflow:hidden;width:100%;padding:0;border-radius:.6px;background-color:#fff;box-shadow: 2px 2px 10px rgba(159,202,255,.5);border-radius: .6rem;} -.post-list-item-container:hover{-webkit-box-shadow: 0 15px 30px rgba(0,0,0,.07);box-shadow: 2px 2px 4px rgba(159,202,255,.5);border-radius: .6rem;} -.liberxue-title{background: rgba(227, 234, 241, 0.3);font-weight: 200;padding: 4px 13px;} -.post-list-item-container .item-thumb{position:relative;display:inherit;min-height:250px;-webkit-transition:-webkit-transform 500ms ease,filter 500ms ease;-moz-transition:-moz-transform 500ms ease,filter 500ms ease;transition:transform 500ms ease,filter 500ms ease;background-position:50% 50%;background-size:cover;} -.post-list-item-container .item-desc{position:absolute;top:0;overflow:hidden;width:100%;height:100%;padding:40px 28px; -webkit-transition: all .2s linear;transition: all .2s linear;} -.post-list-item-container .item-desc p{font-size:14px;margin:0;padding:0;word-break:break-all;opacity:0;color:#fff;} -.post-list-item-container:hover .item-thumb{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);transform:scale(1.1);-webkit-filter:blur(3px);-moz-filter:blur(3px);filter:blur(3px);box-shadow: 0 15px 30px rgba(69, 81, 93, 0.3);} -.post-list-item-container:hover .item-desc{background-color:rgba(0,0,0,.5);-webkit-box-shadow: 0 15px 30px rgba(0,0,0,.04);box-shadow: 0 15px 30px rgba(0,0,0,.07);border-radius: .6rem;} -.post-list-item-container:hover .item-desc p{-webkit-animation:fade-in .5s;animation:fade-in;animation-duration:.5s;opacity:1;} -.post-list-item-container .item-slant{position:absolute;z-index:0;right:0;bottom:50px;left:0;width:110%;min-height:100px;-webkit-transform:rotate(7deg) translate(-10px,0);-ms-transform:rotate(7deg) translate(-10px,0);transform:rotate(7deg) translate(-10px,0);background-color:#fff;} -.post-list-item-container .item-slant.reverse-slant{-webkit-transform:rotate(-10deg) translate(10px,-10px);-ms-transform:rotate(-10deg) translate(10px,-10px);transform:rotate(-10deg) translate(10px,-10px);opacity:.7;background-color:#f68e5f;-webkit-box-shadow:none;box-shadow:none;} -.post-list-item-container .item-label{position:relative;height:130px;padding:25px 20px 40px;background-color:#fff;} -.post-list-item-container .item-label .item-title a{font-size:15px;word-break:break-all;color:#313131;line-height: 30px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; } -.post-list-item-container .item-label .item-title a:hover{ - font-size:15px;word-break:break-all;color:#eb5055;line-height: 30px;overflow:hidden; text-overflow:ellipsis;display:-webkit-box; -webkit-box-orient:vertical;-webkit-line-clamp:2; -} -.post-list-item-container .item-label .item-meta{position:absolute;right:0;bottom:0;width:100%;padding: 0 22px 15px;text-align:right;} -.post-list-item-container .item-label .item-meta .item-meta-cat a{font-size:13px;position:relative;float:right;margin-right:10px;padding:10px 0;text-align:right;text-transform:none;color:#5f5f5f;} -.post-list-item-container .item-label .item-meta .item-meta-date{font-size:12px;position:relative;float:left;padding-top:9px;padding-left:9px;text-align:right;text-transform:none;color:#f1f1f1;} -.post-list-item-container .item-label .item-meta .item-meta-ico{display:inline-block;float:right;width:42px;height:42px;border:1px solid #eaeaea;border-radius:50%;} +.header.animated { + -webkit-animation-duration: .5s; + animation-duration: .5s; + -webkit-animation-fill-mode: both; + animation-fill-mode: both; +} -/* ========================================================================== - #one list page - ========================================================================== */ -.onelist-page{max-width:100%;margin:0;padding:80px 0 0;} -.post-onelist-item{display:inline-block;width:100%;margin:0;} -.post-onelist-item:nth-child(n){background-color:#f7f7f7;} -.post-onelist-item:nth-child(2n){background-color:#fff;} -.post-onelist-item-container{position:relative;max-width:680px;margin:0 auto;padding:70px 20px 65px;} -.post-onelist-item-container .onelist-item-thumb{min-height:260px;border-radius:5px;background-position:50% 50%;background-size:cover;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04);} -.post-onelist-item-container .onelist-item-thumb:hover{-webkit-box-shadow:2px 3px 4px rgba(0,0,0,.1);box-shadow:2px 3px 4px rgba(0,0,0,.1);} -.post-onelist-item-container .item-title{display:block;margin:30px 0 0;text-align:center;} -.post-onelist-item-container .item-title a{font-size:21px;line-height:17px;color:#313131;} -.post-onelist-item-container .item-content{padding:0 30px 10px;text-align:center;word-break:break-all;} -.post-onelist-item-container .item-meta,.post-onelist-item-container .item-readmore{font-size:12px;text-align:center;color:#5f5f5f;} -.post-onelist-item-container .item-meta a{color:#5f5f5f;} -.post-onelist-item-container .item-readmore a{padding:8px 20px;color:#5f5f5f;border:1px solid #5f5f5f;border-radius:20px;} -.post-onelist-item-container .item-meta-hr{display:block;width:55px;height:2px;margin:20px auto 0;} +.header.animated.slideUp { + -webkit-animation-name: slideUp; + animation-name: slideUp; +} -/* ========================================================================== - #post page - ========================================================================== */ -.post-header-thumb{position:relative;width:100%;height: 233px;background: #f7f7f733;} -.post-header-thumb-op{position:absolute;width:100%;width:100%;height:300px;background-position:center;background-size:cover;-webkit-filter:blur(4px);-moz-filter:blur(4px);filter:blur(4px);} -.post-header-thumb-cover{position:relative;width:100%;height:300px;margin-top:80px;background-color:rgba(0,0,0,.5);-webkit-box-shadow:0 1px 5px rgba(0,0,0,.3);-moz-box-shadow:0 1px 5px rgba(0,0,0,.3);box-shadow:0 1px 5px rgba(0,0,0,.3);} -.post-header-thumb-container{position:relative;top:100px;max-width: 1024px;margin:0 auto;-webkit-animation: auto;animation:fade-in;animation-duration:.5s;border-bottom: 1px dashed #d1d3d6;} -.post-header-thumb-title{font-size:21px;font-weight:500;color:#fff;} -.post-header-thumb-meta{color:#fff;} -.post-header-thumb-meta a{color:#fff;} -.post-header-thumb-container .post-tags{border-bottom:none;} -.post-header-thumb-container .post-tags a:hover{color:#5f5f5f;border:1px solid #f7f7f7;outline-style:none;background:#f7f7f7;} -.post-page{max-width: 980px;} -.page-page{max-width:700px;} -.post-content p{font-size:14px;word-wrap:break-word;word-break:break-word;line-height: 40px;} -.post-content h1,.post-content h2,.post-content h3,.post-content h4,.post-content h5,.post-content h6{font-weight:500;position:relative;margin:20px 0;} -.post-content h1::before,.post-content h2::before,.post-content h3::before,.post-content h4::before,.post-content h5::before,.post-content h6::before{font-weight:600;position:absolute;top:0;left:-15px;content:'#';color:#eb5055;} -.post-content pre{overflow-x:auto;margin:20px 0;border-radius:4px;background:#f7f7f7;text-shadow:none;} -.post-content pre code{line-height:20px;margin:0;padding:1.3em;color: #dcdcdc;background-color: #3c3c3c;} -pre code::after {font-size: 1rem;color: #BFBFBF;position: absolute;top: 5px;right: 10px;content:attr(class);} -.post-content p a{color:#313131;border-bottom:1px solid #ccc;} -.post-content p a:hover{color:#eb5055;border-bottom:1px solid #eb5055;} -.post-content img{position:relative;display:block;overflow:hidden;max-width:100%;height:auto;margin:0 auto;} -.post-content input.text{display:inline-block;padding:5px 10px;color:#5f5f5f;border:1px solid #5f5f5f;border-radius:3px;outline:0;background-color:#fff;} -.post-content input.submit{display:inline-block;padding:5px 15px;color:#fff;border:1px solid #5f5f5f;border-radius:3px;outline:0;background-color:#5f5f5f;} -.post-content .flinks{padding:0;} -.post-content .flinks li{display:inline-block;overflow:hidden;width:32%;white-space:nowrap;text-overflow:ellipsis;} -.post-page .post-header{display:none;} -.post-page .post-content .post-tags{display:none;} -.post-title{font-size:21px;} -.post-data,.post-data a{font-size:13px;color:#5f5f5f;margin: 7px 15px 0 0;} -.post-tags{margin:0;padding:5px 0 15px;border-bottom: 1px solid #e0e0e0;} -.post-tags a{font-size:13px;font-weight:600;display:inline-block;margin: 10px 8px 0 0;padding:0 15px;-webkit-transition-duration:400ms;transition-duration:400ms;text-decoration:none!important;letter-spacing:0;} -.post-tags a:nth-child(1n){color:#fff;border:1px solid #6fa3ef;border-radius:15px;background:#6fa3ef;} -.post-tags a:nth-child(2n){color:#fff;border:1px solid #ff9800;border-radius:15px;background:#ff9800;} -.post-tags a:nth-child(3n){color:#fff;border:1px solid #46c47c;border-radius:15px;background:#46c47c;} -.post-tags a:nth-child(4n){color:#fff;border:1px solid #f9bb3c;border-radius:15px;background:#f9bb3c;} -.post-tags a:nth-child(5n){color:#fff;border:1px solid #bc99c4;border-radius:15px;background:#bc99c4;} -.post-tags a:nth-child(6n){color:#fff;border:1px solid #e8583d;border-radius:15px;background:#e8583d;} -/* .post-tags a::before{content:'# ';} */ -.post-content .post-tags a:hover{color:#5f5f5f;border:1px solid #f7f7f7;outline-style:none;background:#f7f7f7;} -.post-info{overflow:hidden;margin:25px -20px 0;padding:25px 20px 20px;white-space:nowrap;text-overflow:ellipsis;border-top:1px solid #e0e0e0;} -.related-post-lists{position:relative;z-index:1;margin-bottom:-10px;padding-top:30px;background-color:#f7f7f7;} -.related-post-lists .post-lists{max-width:940px;margin:0 auto;} -.related-post-lists .post-list-item-container{border:1px solid rgba(184,197,214,.2);border-radius:3px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04);} -.related-post-lists .post-list-item-container .item-label{height:120px;background:#fff;} -.related-post-lists .post-list-item-container .item-label .item-title a{font-size:14px;color:#313131;} -.related-post-lists .post-list-item-container .item-label .item-meta .item-meta-cat a{color:#5f5f5f;} -.related-post-lists .post-list-item-container .item-label .item-meta .item-meta-ico{width:42px;height:42px;border:1px solid #eaeaea;border-radius:50%;} -.archive-page{padding:120px 20px 40px;} -.archive-page .categorys-title{font-size:14px;position:relative;margin:10px auto;padding:0 30px;color:#5f5f5f;} -.archive-page .categorys-title a{color:#5f5f5f;} -.archive-page .categorys-title::before{position:absolute;top:0;left:-15px;padding:0 30px;content:'#';color:#eb5055;} -.archive-page .post-list-item-container{border:1px solid rgba(184,197,214,.2);border-radius:3px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04);border-radius: .6rem;} -.archive-page .post-list-item-container .item-label{height:95px;background:#fff;} -.archive-page .post-list-item-container .item-label .item-title a{font-size:14px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#313131;} -.archive-page .post-list-item-container .item-label .item-meta .item-meta-date{padding-bottom:5px;padding-left:5px;color:#5f5f5f;} -.common-page{padding:120px 20px 0;} -.common-page .common-title{font-size:14px;position:relative;margin:10px auto;padding:0 30px;color:#5f5f5f;} -.common-page .common-title::before{position:absolute;top:0;left:-15px;padding:0 30px;content:'#';color:#eb5055;} -.common-page .post-list-item{width:49.9999%;} -.common-page .post-list-item-container .item-label{background-color:#fff;} -.common-page .post-list-item-container .item-label .item-title a{font-size:14px;color:#313131;} -.common-page .post-list-item-container .item-label .item-meta .item-meta-date{padding-bottom:5px;padding-left:5px;color:#5f5f5f;} -.common-page .post-list-item:hover,.archive-page .post-list-item:hover,.related-post-lists .post-list-item:hover{-webkit-transition-duration:.3s;transition-duration:.3s;-webkit-transform:scale(1.03);transform:scale(1.03);} -.post-list-item-container .item-label.bg-blue .item-title a{color:#fff;} -.post-list-item-container .item-label.bg-purple .item-title a{color:#fff;} -.post-list-item-container .item-label.bg-green .item-title a{color:#fff;} -.post-list-item-container .item-label.bg-yellow .item-title a{color:#fff;} -.post-list-item-container .item-label.bg-red .item-title a{color:#fff;} -.post-list-item-container .item-label.bg-orange .item-title a{color:#fff;} -.post-list-item-container .item-label.bg-blue .item-meta .item-meta-date{color:#fff;} -.post-list-item-container .item-label.bg-purple .item-meta .item-meta-date{color:#fff;} -.post-list-item-container .item-label.bg-green .item-meta .item-meta-date{color:#fff;} -.post-list-item-container .item-label.bg-yellow .item-meta .item-meta-date{color:#fff;} -.post-list-item-container .item-label.bg-red .item-meta .item-meta-date{color:#fff;} -.post-list-item-container .item-label.bg-orange .item-meta .item-meta-date{color:#fff;} +.header.animated.slideDown { + -webkit-animation-name: slideDown; + animation-name: slideDown; +} -/* ========================================================================== - #directory - ========================================================================== */ -.directory-content{position:relative; z-index:99999;max-width:8; line-height: 30px; - max-height: 10px; +.navbar-container { + position: relative; + width: 1040px; + max-width: 100%; + height: 80px; + margin: 0 auto; +} + +.navbar-logo { + font-size: 22px; + line-height: 22px; + position: absolute; + top: 30%; + display: block; + width: auto; + max-width: 50%; + height: 22px; + text-decoration: none; +} + +.navbar-logo img { + width: auto; + height: 35px; + outline: 0; +} + +.navbar-menu { + z-index: 10; + display: inline-block; + width: 500px; + padding-right: 5px; +} + +.navbar-menu a { + font-size: 14px; + padding: 0 15px; +} + +.navbar-mobile-menu { + line-height: 80px; + z-index: 1; + display: none; + width: 28px; + padding: 0 45px 0 10px; + cursor: pointer; +} + +.navbar-mobile-menu:active, .navbar-mobile-menu:hover { + cursor: pointer; +} + +.navbar-mobile-menu:active:before, .navbar-mobile-menu:hover:before { + -webkit-animation: pointer-ball .3s ease 1; + animation: pointer-ball .3s ease 1; + -webkit-animation-timing-function: cubic-bezier(.61, .04, .17, 1.32); + animation-timing-function: cubic-bezier(.61, .04, .17, 1.32); +} + +.navbar-mobile-menu:active .icon-menu, .navbar-mobile-menu:hover .icon-menu { + -webkit-transform: rotateZ(360deg); + -ms-transform: rotateZ(360deg); + transform: rotateZ(360deg); +} + +.navbar-mobile-menu:active .icon-menu.cross .middle, .navbar-mobile-menu:active .icon-menu.cross:after, .navbar-mobile-menu:active .icon-menu.cross:before, .navbar-mobile-menu:hover .icon-menu.cross .middle, .navbar-mobile-menu:hover .icon-menu.cross:after, .navbar-mobile-menu:hover .icon-menu.cross:before { + background: #eb5055; +} + +.navbar-mobile-menu:active .icon-menu.cross .middle, .navbar-mobile-menu:hover .icon-menu.cross .middle { + opacity: 0; +} + +.navbar-mobile-menu:active .icon-menu.cross:after, .navbar-mobile-menu:hover .icon-menu.cross:after { + bottom: 5px; + -webkit-transform: rotate(135deg); + -ms-transform: rotate(135deg); + transform: rotate(135deg); +} + +.navbar-mobile-menu:active .icon-menu.cross:before, .navbar-mobile-menu:hover .icon-menu.cross:before { + top: 5px; + -webkit-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + -webkit-box-shadow: 0 0 0 white; + box-shadow: 0 0 0 white; +} + +.navbar-mobile-menu li { + position: relative; + display: inline; + margin: 0; + text-decoration: none; +} + +.navbar-mobile-menu ul { + position: absolute; + z-index: 1; + top: 100%; overflow: hidden; - margin-right:auto!important; - margin-left:auto!important; - text-align:right;} -directory-content:after { - content: "..."; position: absolute; bottom: 0; right: 0; padding-left: 40px; - background: -webkit-linear-gradient(left, transparent, #fff 55%); - background: -o-linear-gradient(right, transparent, #fff 55%); - background: -moz-linear-gradient(right, transparent, #fff 55%); - background: linear-gradient(to right, transparent, #fff 55%); + clip: rect(1px, 1px, 1px, 1px); + margin: 0 0 0 -95px; + padding: 0; + -webkit-transition: -webkit-transform 300ms; + transition: -webkit-transform 300ms; + transition: transform 300ms; + -webkit-transform: translate(120px, 0); + -ms-transform: translate(120px, 0); + transform: translate(120px, 0); + text-indent: 0; } -.directory-content.initial{opacity:0;} -.directory-content.pinned{opacity:1;} -.directory-content.unpinned{opacity:1;} -.directory-content.headroom--top{opacity:0;} -.directory-content.headroom--not-top{-webkit-transition:opacity 500ms ease-in-out;transition:opacity 500ms ease-in-out;opacity:1;} -#directory{position:fixed;z-index:0;top: 50px;display:inline-block;text-align:left;margin-top: 200px;} -#directory ul,#directory li{margin:0;padding-left:0;list-style:none;} -#directory>ul{position:relative;border-left:1px solid #ddd;} -#directory>ul>li::before{position:relative;top:0;left:-4px;display:inline-block;width:7px;height:7px;content:'';border-radius:50%;background-color:#eb5055;} -#directory ul li a{display:inline-table;margin-left:5px;white-space:nowrap;} -#directory ul li ul li a{margin-left:20px;white-space:nowrap;color:#5f5f5f;} -#directory ul li ul li ul li a{margin-left:30px;color:#5f5f5f;} -#directory a:hover{color:#eb5055;} -/* ========================================================================== - #navigator - ========================================================================== */ -.lists-navigator{margin:30px 0 35px;} -.onelist-page .lists-navigator{margin:35px 0 35px;} -.lists-navigator ol{margin:0;padding:0 10px;list-style:none;text-align:center;} -.lists-navigator ol li{display:inline-block;color:#5f5f5f;} -.lists-navigator ol li a{font-size:14px;padding:0 20px;color:#5f5f5f;} -.lists-navigator ol li.current a{color:#eb5055;} -#comments .lists-navigator{margin:20px 0;} -#comments .lists-navigator ol{margin:20px 0;padding:0 10px;list-style:none;text-align:center;} -#comments .lists-navigator ol li.current a{color:#eb5055;} +.navbar-mobile-menu:hover > ul, .navbar-mobile-menu:active > ul, .navbar-mobile-menu:focus > ul { + overflow: inherit; + clip: inherit; + -webkit-transition: -webkit-transform 300ms; + transition: -webkit-transform 300ms; + transition: transform 300ms; + -webkit-transform: translateX(0px) translateY(0px) translateZ(0px); + transform: translateX(0px) translateY(0px) translateZ(0px); +} -/* ========================================================================== - #comments - ========================================================================== */ -.comment-container{position:relative;z-index:1;color:#5f5f5f;background-color:#f7f7f7;} -#comments{max-width:700px;margin:0 auto;padding:0 20px;} -#comments .page-navigator{margin:0;} -#comments a{color:#5f5f5f;} -#comments .response{font-size:14px;font-weight:400;display:block;padding:30px 0 30px 20px;color:#5f5f5f;} -#comments .response a{color:#eb5055;} -.comment-list{margin:0;padding-left:0;list-style-type:none;} -.comment-parent{margin:20px 0;border:1px solid rgba(184,197,214,.2);border-radius:3px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04);} -.comment-parent:last-child{margin:20px 0 0;} -.comment-parent:first-child{margin:0;} -.comment-child,.comment-child2{border-top:1px solid rgba(184,197,214,.2);} -.comment-view{padding:20px;cursor:pointer;} -.comment-header{display:inline-block;width:100%;} -.comment-header .avatar{display:inline-block;float:left;width:40px;height:40px;border:1px solid #eaeaea;border-radius:50%;} -.comment-header .comment-author{font-size:13px;line-height:45px;display:inline-block;float:left;margin:0 20px;} -.comment-header .comment-by-author a{color:#eb5055!important;} -.comment-content{margin-bottom:10px;color:#313131;} -.comment-meta{font-size:12px;} -.comment-meta .comment-reply{display:none;float:right;} -.comment-meta .comment-reply a{color:#eb5055!important;} -.comment-view:hover .comment-meta .comment-reply{display:block;} -.comment-parent>.comment-children .avatar{width:34px;height:34px;margin:3px 0 0 3px;} -.comment-parent>.comment-children .comment-author-at{float:left;margin-right:5px;} -.comment-parent>.comment-children .comment-content{margin:-3px 3px 10px;} -.comment-parent>.comment-children .comment-meta{margin:0 3px;} -.comment-form{position:relative;margin:0 0 40px;padding:10px 20px;border-radius:3px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.04);box-shadow:0 1px 4px rgba(0,0,0,.04);} -.comment-form .form-control{font-size:13px;display:block;width:100%;height:34px;color:#313131;outline:0;} -.comment-form .form-control:focus{border-color:#eb5055;outline:0;} -.comment-form textarea.form-control{overflow:hidden;height:150px;padding:10px 0;resize:none;border-radius:0;} -.comment-form .input-control{float:left;width:100%;max-width:206px;border-bottom:1px dashed #ddd;border-radius:0;} -.comment-form .submit{font-size:13px;position:absolute;right:20px;bottom:20px;display:block;height:32px;margin:0 auto;padding:0 20px;-webkit-transition-duration:400ms;transition-duration:400ms;text-align:center;color:#313131;border:1px solid #f7f7f7;border-radius:30px;background-color:#f7f7f7;} -.comment-form .submit:hover,.submit:focus,.submit:active,.submit:active:focus{color:#eb5055;border:1px solid #eb5055;outline-style:none;background-color:#fff;} +.navbar-mobile-menu ul li a { + font-size: 15px; + line-height: 2.2; + display: block; + width: 140px; + margin: 0; + padding: 8px 25px; + background-color: #eee; +} + +.navbar-search { + line-height: 80px; + display: inline-block; + width: 20px; + padding: 0 40px 0 0; + cursor: pointer; +} + +.navbar-search:hover > form, .navbar-search:active > form, .navbar-search:focus > form { + overflow: inherit; + clip: inherit; + -webkit-transition: opacity 500ms ease-in-out; + transition: opacity 500ms ease-in-out; + opacity: 1; +} + +.navbar-search:hover > .icon-search, .navbar-search:active > .icon-search, .navbar-search:focus > .icon-search { + color: #eb5055; +} + +.navbar-search form { + line-height: 30px; + position: absolute; + top: 50%; + right: 0; + display: block; + overflow: hidden; + clip: rect(1px, 1px, 1px, 1px); + width: auto; + max-width: 60%; + height: 30px; + margin-top: -15px; + padding-right: 10px; + opacity: 0; +} + +.navbar-search form .search-box { + line-height: 30px; + position: relative; + top: -1px; + display: inline-block; + width: 400px; + max-width: 100%; + height: 30px; + padding: 0; + border: none; + border-radius: 3px; +} + +.navbar-search form .search-box input { + font-size: 14px; + line-height: 30px; + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 30px; + padding: 0 40px 0 18px; + color: #313131; + border: 1px solid #eb5055; + border-radius: 20px; + outline: 0; + background-color: #fff; + -webkit-appearance: none; +} + +.navbar-search form .search-box ul { + font-size: 14px; + line-height: 50px; + color: #eb5055; + background-color: #fff; + z-index: 9999; + text-align: center; + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + box-shadow: 0 1px 5px rgba(0, 0, 0, .1); + border-radius: 0.50rem; +} + +.navbar-search form .search-box ul li { + z-index: 9999; + text-align: center; + overflow: hidden; + text-overflow: ellipsis; + -o-text-overflow: ellipsis; + white-space: nowrap; + width: 100%; +} /* ========================================================================== - #footer + #main content ========================================================================== */ -.footer{position:relative;z-index:1;margin-top:0;padding-bottom:50px;background-color:#fff;} -.footer-social{border-bottom:1px solid rgba(184,197,214,.2); box-shadow: 0 -2px 8px 0 rgba(239, 241, 243, 0.59);} -.footer-social .footer-container{max-width:940px;margin:0 auto;} -.footer-social .social-list{padding:20px;text-align:center;font-size: 1.3em;font-family: "Abril Fatface", serif;} -.footer-social .social-list a{font-size:13px;padding:0 25px;text-decoration:none;color:#5f5f5f;} -.footer-meta{padding:50px 0 0;list-style:none;font-size: 1.3em;font-family: "Abril Fatface", serif;} -.footer-meta .footer-container{width:100%;max-width: 1024px;height:250px;margin:0 auto;} -.footer-meta .meta-item{position:relative;float:left;width:33.3333333%;min-height:1px;padding:0 30px;} -.footer-meta .meta-copyright .info-logo img{height:32px;margin-bottom:12px;} -.footer-meta .meta-copyright .info-text p{font-size:13px;line-height:20px;margin:0;color:#767676;} -.footer-meta .meta-copyright .info-text a{color:#767676;} -.footer-meta .meta-title{font-size:14px;padding:0 0 10px 0;text-decoration:none;color:#5f5f5f;} -.footer-meta .meta-posts li{font-size:13px;line-height:25px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#767676;} -.footer-meta .meta-posts li a{color:#5f5f5f;} -.footer-meta .meta-comments li{font-size:13px;line-height:25px;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;color:#5f5f5f;} -.footer-meta .meta-comments li a{color:#767676;} +.main-content { + position: relative; + -webkit-animation: fade-in .5s; + animation: fade-in; + animation-duration: .5s; + width: 65%; +} + +.index-page { + padding: 120px 20px 0; + margin: auto; +} + +.index-page .post-list-item-container .item-label { + padding: 10px 20px 40px; +} + +.post-lists { + position: relative; + display: block; + overflow: hidden; +} + +.post-lists-body { + display: block; +} + +.post-list-item { + float: left; + width: 33.3333%; + height: auto; + padding: 18px; + align-items: center; +} + +.post-list-item-container { + position: relative; + overflow: hidden; + width: 100%; + padding: 0; + border-radius: .6px; + background-color: #fff; + box-shadow: 2px 2px 10px rgba(159, 202, 255, .5); + border-radius: .6rem; +} + +.post-list-item-container:hover { + -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .07); + box-shadow: 2px 2px 4px rgba(159, 202, 255, .5); + border-radius: .6rem; +} + +.liberxue-title { + background: rgba(227, 234, 241, 0.3); + font-weight: 200; + padding: 4px 13px; +} + +.post-list-item-container .item-thumb { + position: relative; + display: inherit; + min-height: 250px; + -webkit-transition: -webkit-transform 500ms ease, filter 500ms ease; + -moz-transition: -moz-transform 500ms ease, filter 500ms ease; + transition: transform 500ms ease, filter 500ms ease; + background-position: 50% 50%; + background-size: cover; +} + +.post-list-item-container .item-desc { + position: absolute; + top: 0; + overflow: hidden; + width: 100%; + height: 100%; + padding: 40px 28px; + -webkit-transition: all .2s linear; + transition: all .2s linear; +} + +.post-list-item-container .item-desc p { + font-size: 14px; + margin: 0; + padding: 0; + word-break: break-all; + opacity: 0; + color: #fff; +} + +.post-list-item-container:hover .item-thumb { + -webkit-transform: scale(1.1); + -moz-transform: scale(1.1); + transform: scale(1.1); + -webkit-filter: blur(3px); + -moz-filter: blur(3px); + filter: blur(3px); + box-shadow: 0 15px 30px rgba(69, 81, 93, 0.3); +} + +.post-list-item-container:hover .item-desc { + background-color: rgba(0, 0, 0, .5); + -webkit-box-shadow: 0 15px 30px rgba(0, 0, 0, .04); + box-shadow: 0 15px 30px rgba(0, 0, 0, .07); + border-radius: .6rem; +} + +.post-list-item-container:hover .item-desc p { + -webkit-animation: fade-in .5s; + animation: fade-in; + animation-duration: .5s; + opacity: 1; +} + +.post-list-item-container .item-slant { + position: absolute; + z-index: 0; + right: 0; + bottom: 50px; + left: 0; + width: 110%; + min-height: 100px; + -webkit-transform: rotate(7deg) translate(-10px, 0); + -ms-transform: rotate(7deg) translate(-10px, 0); + transform: rotate(7deg) translate(-10px, 0); + background-color: #fff; +} + +.post-list-item-container .item-slant.reverse-slant { + -webkit-transform: rotate(-10deg) translate(10px, -10px); + -ms-transform: rotate(-10deg) translate(10px, -10px); + transform: rotate(-10deg) translate(10px, -10px); + opacity: .7; + background-color: #f68e5f; + -webkit-box-shadow: none; + box-shadow: none; +} + +.post-list-item-container .item-label { + position: relative; + height: 130px; + padding: 25px 20px 40px; + background-color: #fff; +} + +.post-list-item-container .item-label .item-title a { + font-size: 15px; + word-break: break-all; + color: #313131; + line-height: 30px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.post-list-item-container .item-label .item-title a:hover { + font-size: 15px; + word-break: break-all; + color: #eb5055; + line-height: 30px; + overflow: hidden; + text-overflow: ellipsis; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; +} + +.post-list-item-container .item-label .item-meta { + position: absolute; + right: 0; + bottom: 0; + width: 100%; + padding: 0 22px 15px; + text-align: right; +} + +.post-list-item-container .item-label .item-meta .item-meta-cat a { + font-size: 13px; + position: relative; + float: right; + margin-right: 10px; + padding: 10px 0; + text-align: right; + text-transform: none; + color: #5f5f5f; +} + +.post-list-item-container .item-label .item-meta .item-meta-date { + font-size: 12px; + position: relative; + float: left; + padding-top: 9px; + padding-left: 9px; + text-align: right; + text-transform: none; + color: #f1f1f1; +} + +.post-list-item-container .item-label .item-meta .item-meta-ico { + display: inline-block; + float: right; + width: 42px; + height: 42px; + border: 1px solid #eaeaea; + border-radius: 50%; +} + +/* ========================================================================== + #one list page + ========================================================================== */ +.onelist-page { + max-width: 100%; + margin: 0; + padding: 80px 0 0; +} + +.post-onelist-item { + display: inline-block; + width: 100%; + margin: 0; +} + +.post-onelist-item:nth-child(n) { + background-color: #f7f7f7; +} + +.post-onelist-item:nth-child(2n) { + background-color: #fff; +} + +.post-onelist-item-container { + position: relative; + max-width: 680px; + margin: 0 auto; + padding: 70px 20px 65px; +} + +.post-onelist-item-container .onelist-item-thumb { + min-height: 260px; + border-radius: 5px; + background-position: 50% 50%; + background-size: cover; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04); + box-shadow: 0 1px 4px rgba(0, 0, 0, .04); +} + +.post-onelist-item-container .onelist-item-thumb:hover { + -webkit-box-shadow: 2px 3px 4px rgba(0, 0, 0, .1); + box-shadow: 2px 3px 4px rgba(0, 0, 0, .1); +} + +.post-onelist-item-container .item-title { + display: block; + margin: 30px 0 0; + text-align: center; +} + +.post-onelist-item-container .item-title a { + font-size: 21px; + line-height: 17px; + color: #313131; +} + +.post-onelist-item-container .item-content { + padding: 0 30px 10px; + text-align: center; + word-break: break-all; +} + +.post-onelist-item-container .item-meta, .post-onelist-item-container .item-readmore { + font-size: 12px; + text-align: center; + color: #5f5f5f; +} + +.post-onelist-item-container .item-meta a { + color: #5f5f5f; +} + +.post-onelist-item-container .item-readmore a { + padding: 8px 20px; + color: #5f5f5f; + border: 1px solid #5f5f5f; + border-radius: 20px; +} + +.post-onelist-item-container .item-meta-hr { + display: block; + width: 55px; + height: 2px; + margin: 20px auto 0; +} + +/* ========================================================================== + #post page + ========================================================================== */ +.post-header-thumb { + position: relative; + height: 233px; + background: #f7f7f733; +} + +.post-header-thumb-op { + position: absolute; + width: 100%; + height: 300px; + background-position: center; + background-size: cover; + -webkit-filter: blur(4px); + -moz-filter: blur(4px); + filter: blur(4px); +} + +.post-header-thumb-cover { + position: relative; + width: 100%; + height: 300px; + margin-top: 80px; + background-color: rgba(0, 0, 0, .5); + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, .3); + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, .3); + box-shadow: 0 1px 5px rgba(0, 0, 0, .3); +} + +.post-header-thumb-container { + position: relative; + top: 100px; + max-width: 1024px; + margin: 0 auto; + -webkit-animation: auto; + animation: fade-in; + animation-duration: .5s; + border-bottom: 1px dashed #d1d3d6; +} + +.post-header-thumb-title { + font-size: 21px; + font-weight: 500; + color: #fff; +} + +.post-header-thumb-meta { + color: #fff; +} + +.post-header-thumb-meta a { + color: #fff; +} + +.post-header-thumb-container .post-tags { + border-bottom: none; +} + +.post-header-thumb-container .post-tags a:hover { + color: #5f5f5f; + border: 1px solid #f7f7f7; + outline-style: none; + background: #f7f7f7; +} + +.post-page {text-align: left;margin: auto;} + +.page-page { + max-width: 700px; +} + +.post-content p { + font-size: 14px; + word-wrap: break-word; + word-break: break-word; + line-height: 40px; +} + +.post-content h1, .post-content h2, .post-content h3, .post-content h4, .post-content h5, .post-content h6 { + font-weight: 500; + position: relative; + margin: 20px 0; +} + +.post-content h1::before, .post-content h2::before, .post-content h3::before, .post-content h4::before, .post-content h5::before, .post-content h6::before { + font-weight: 600; + position: absolute; + top: 0; + left: -15px; + content: '#'; + color: #eb5055; +} + +.post-content pre { + overflow-x: auto; + margin: 20px 0; + border-radius: 4px; + background: #f7f7f7; + text-shadow: none; +} + +.post-content pre code { + line-height: 20px; + margin: 0; + padding: 1.3em; + color: #dcdcdc; + background-color: #3c3c3c; +} + +pre code::after { + font-size: 1rem; + color: #BFBFBF; + position: absolute; + top: 5px; + right: 10px; + content: attr(class); +} + +.post-content p a { + color: #313131; + border-bottom: 1px solid #ccc; +} + +.post-content p a:hover { + color: #eb5055; + border-bottom: 1px solid #eb5055; +} + +.post-content img { + position: relative; + display: block; + overflow: hidden; + max-width: 100%; + height: auto; + margin: 0 auto; +} + +.post-content input.text { + display: inline-block; + padding: 5px 10px; + color: #5f5f5f; + border: 1px solid #5f5f5f; + border-radius: 3px; + outline: 0; + background-color: #fff; +} + +.post-content input.submit { + display: inline-block; + padding: 5px 15px; + color: #fff; + border: 1px solid #5f5f5f; + border-radius: 3px; + outline: 0; + background-color: #5f5f5f; +} + +.post-content .flinks { + padding: 0; +} + +.post-content .flinks li { + display: inline-block; + overflow: hidden; + width: 32%; + white-space: nowrap; + text-overflow: ellipsis; +} + +.post-page .post-header { + display: none; +} + +.post-page .post-content .post-tags { + display: none; +} + +.post-title { + font-size: 21px; +} + +.post-data, .post-data a { + font-size: 13px; + color: #5f5f5f; + margin: 7px 15px 0 0; +} + +.post-tags { + margin: 0; + padding: 5px 0 15px; + border-bottom: 1px solid #e0e0e0; +} + +.post-tags a { + font-size: 13px; + font-weight: 600; + display: inline-block; + margin: 10px 8px 0 0; + padding: 0 15px; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + text-decoration: none !important; + letter-spacing: 0; +} + +.post-tags a:nth-child(1n) { + color: #fff; + border: 1px solid #6fa3ef; + border-radius: 15px; + background: #6fa3ef; +} + +.post-tags a:nth-child(2n) { + color: #fff; + border: 1px solid #ff9800; + border-radius: 15px; + background: #ff9800; +} + +.post-tags a:nth-child(3n) { + color: #fff; + border: 1px solid #46c47c; + border-radius: 15px; + background: #46c47c; +} + +.post-tags a:nth-child(4n) { + color: #fff; + border: 1px solid #f9bb3c; + border-radius: 15px; + background: #f9bb3c; +} + +.post-tags a:nth-child(5n) { + color: #fff; + border: 1px solid #bc99c4; + border-radius: 15px; + background: #bc99c4; +} + +.post-tags a:nth-child(6n) { + color: #fff; + border: 1px solid #e8583d; + border-radius: 15px; + background: #e8583d; +} + +/* .post-tags a::before{content:'# ';} */ +.post-content .post-tags a:hover { + color: #5f5f5f; + border: 1px solid #f7f7f7; + outline-style: none; + background: #f7f7f7; +} + +.post-info { + overflow: hidden; + margin: 25px -20px 0; + padding: 25px 20px 20px; + white-space: nowrap; + text-overflow: ellipsis; + border-top: 1px solid #e0e0e0; +} + +.related-post-lists { + position: relative; + z-index: 1; + margin-bottom: -10px; + padding-top: 30px; + background-color: #f7f7f7; +} + +.related-post-lists .post-lists { + max-width: 940px; + margin: 0 auto; +} + +.related-post-lists .post-list-item-container { + border: 1px solid rgba(184, 197, 214, .2); + border-radius: 3px; + background: #fff; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04); + box-shadow: 0 1px 4px rgba(0, 0, 0, .04); +} + +.related-post-lists .post-list-item-container .item-label { + height: 120px; + background: #fff; +} + +.related-post-lists .post-list-item-container .item-label .item-title a { + font-size: 14px; + color: #313131; +} + +.related-post-lists .post-list-item-container .item-label .item-meta .item-meta-cat a { + color: #5f5f5f; +} + +.related-post-lists .post-list-item-container .item-label .item-meta .item-meta-ico { + width: 42px; + height: 42px; + border: 1px solid #eaeaea; + border-radius: 50%; +} + +.archive-page { + padding: 120px 20px 40px; +} + +.archive-page .categorys-title { + font-size: 14px; + position: relative; + margin: 10px auto; + padding: 0 30px; + color: #5f5f5f; +} + +.archive-page .categorys-title a { + color: #5f5f5f; +} + +.archive-page .categorys-title::before { + position: absolute; + top: 0; + left: -15px; + padding: 0 30px; + content: '#'; + color: #eb5055; +} + +.archive-page .post-list-item-container { + border: 1px solid rgba(184, 197, 214, .2); + border-radius: 3px; + background: #fff; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04); + box-shadow: 0 1px 4px rgba(0, 0, 0, .04); + border-radius: .6rem; +} + +.archive-page .post-list-item-container .item-label { + height: 95px; + background: #fff; +} + +.archive-page .post-list-item-container .item-label .item-title a { + font-size: 14px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #313131; +} + +.archive-page .post-list-item-container .item-label .item-meta .item-meta-date { + padding-bottom: 5px; + padding-left: 5px; + color: #5f5f5f; +} + +.common-page { + padding: 120px 20px 0; +} + +.common-page .common-title { + font-size: 14px; + position: relative; + margin: 10px auto; + padding: 0 30px; + color: #5f5f5f; +} + +.common-page .common-title::before { + position: absolute; + top: 0; + left: -15px; + padding: 0 30px; + content: '#'; + color: #eb5055; +} + +.common-page .post-list-item { + width: 49.9999%; +} + +.common-page .post-list-item-container .item-label { + background-color: #fff; +} + +.common-page .post-list-item-container .item-label .item-title a { + font-size: 14px; + color: #313131; +} + +.common-page .post-list-item-container .item-label .item-meta .item-meta-date { + padding-bottom: 5px; + padding-left: 5px; + color: #5f5f5f; +} + +.common-page .post-list-item:hover, .archive-page .post-list-item:hover, .related-post-lists .post-list-item:hover { + -webkit-transition-duration: .3s; + transition-duration: .3s; + -webkit-transform: scale(1.03); + transform: scale(1.03); +} + +.post-list-item-container .item-label.bg-blue .item-title a { + color: #fff; +} + +.post-list-item-container .item-label.bg-purple .item-title a { + color: #fff; +} + +.post-list-item-container .item-label.bg-green .item-title a { + color: #fff; +} + +.post-list-item-container .item-label.bg-yellow .item-title a { + color: #fff; +} + +.post-list-item-container .item-label.bg-red .item-title a { + color: #fff; +} + +.post-list-item-container .item-label.bg-orange .item-title a { + color: #fff; +} + +.post-list-item-container .item-label.bg-blue .item-meta .item-meta-date { + color: #fff; +} + +.post-list-item-container .item-label.bg-purple .item-meta .item-meta-date { + color: #fff; +} + +.post-list-item-container .item-label.bg-green .item-meta .item-meta-date { + color: #fff; +} + +.post-list-item-container .item-label.bg-yellow .item-meta .item-meta-date { + color: #fff; +} + +.post-list-item-container .item-label.bg-red .item-meta .item-meta-date { + color: #fff; +} + +.post-list-item-container .item-label.bg-orange .item-meta .item-meta-date { + color: #fff; +} + +/* ========================================================================== + #directory + ========================================================================== */ +.directory-content { + position: relative; + z-index: 99999; + width: 68%; + line-height: 30px; + max-height: 10px; + margin-right: auto !important; + margin-left: auto !important; + text-align: right; +} + +.directory-content.initial { + opacity: 0; +} + +.directory-content.pinned { + opacity: 1; +} + +.directory-content.unpinned { + opacity: 1; +} + +.directory-content.headroom--top { + opacity: 0; +} + +.directory-content.headroom--not-top { + -webkit-transition: opacity 500ms ease-in-out; + transition: opacity 500ms ease-in-out; + opacity: 1; +} + +#directory { + position: fixed; + top: 100px; + display: inline-block; + text-align: left; + margin-top: 200px; +} + +#directory ul, #directory li { + margin: 0; + padding-left: 0; + list-style: none; +} + +#directory > ul { + position: relative; + border-left: 1px solid #ddd; +} + + + +#directory ul li a { + display: inline-table; + margin-left: 5px; + white-space: nowrap; +} + +#directory ul li ul li a { + margin-left: 20px; + white-space: nowrap; + color: #5f5f5f; +} + +#directory > ul > li::before { + position: relative; + top: 0; + left: -4px; + display: inline-block; + width: 7px; + height: 7px; + content: ''; + border-radius: 50%; + background-color: #eb5055; +} +#directory ul li ul li ul li a ::after { + content: "..."; + position: absolute; + bottom: 0; + right: 0; + padding-left: 40px; + background: -webkit-linear-gradient(left, transparent, #fff 55%); + background: -o-linear-gradient(right, transparent, #fff 55%); + background: -moz-linear-gradient(right, transparent, #fff 55%); + background: linear-gradient(to right, transparent, #fff 55%); +} +#directory ul li ul li ul li a { + margin-left: 30px; + color: #5f5f5f; +} + +#directory a:hover { + color: #eb5055; +} + +/* ========================================================================== + #navigator + ========================================================================== */ +.lists-navigator { + margin: 30px 0 35px; +} + +.onelist-page .lists-navigator { + margin: 35px 0 35px; +} + +.lists-navigator ol { + margin: 0; + padding: 0 10px; + list-style: none; + text-align: center; +} + +.lists-navigator ol li { + display: inline-block; + color: #5f5f5f; +} + +.lists-navigator ol li a { + font-size: 14px; + padding: 0 20px; + color: #5f5f5f; +} + +.lists-navigator ol li.current a { + color: #eb5055; +} + +#comments .lists-navigator { + margin: 20px 0; +} + +#comments .lists-navigator ol { + margin: 20px 0; + padding: 0 10px; + list-style: none; + text-align: center; +} + +#comments .lists-navigator ol li.current a { + color: #eb5055; +} + +/* ========================================================================== + #comments + ========================================================================== */ +.comment-container { + position: relative; + z-index: 1; + color: #5f5f5f; + background-color: #f7f7f7; +} + +#comments { + max-width: 700px; + margin: 0 auto; + padding: 0 20px; +} + +#comments .page-navigator { + margin: 0; +} + +#comments a { + color: #5f5f5f; +} + +#comments .response { + font-size: 14px; + font-weight: 400; + display: block; + padding: 30px 0 30px 20px; + color: #5f5f5f; +} + +#comments .response a { + color: #eb5055; +} + +.comment-list { + margin: 0; + padding-left: 0; + list-style-type: none; +} + +.comment-parent { + margin: 20px 0; + border: 1px solid rgba(184, 197, 214, .2); + border-radius: 3px; + background: #fff; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04); + box-shadow: 0 1px 4px rgba(0, 0, 0, .04); +} + +.comment-parent:last-child { + margin: 20px 0 0; +} + +.comment-parent:first-child { + margin: 0; +} + +.comment-child, .comment-child2 { + border-top: 1px solid rgba(184, 197, 214, .2); +} + +.comment-view { + padding: 20px; + cursor: pointer; +} + +.comment-header { + display: inline-block; + width: 100%; +} + +.comment-header .avatar { + display: inline-block; + float: left; + width: 40px; + height: 40px; + border: 1px solid #eaeaea; + border-radius: 50%; +} + +.comment-header .comment-author { + font-size: 13px; + line-height: 45px; + display: inline-block; + float: left; + margin: 0 20px; +} + +.comment-header .comment-by-author a { + color: #eb5055 !important; +} + +.comment-content { + margin-bottom: 10px; + color: #313131; +} + +.comment-meta { + font-size: 12px; +} + +.comment-meta .comment-reply { + display: none; + float: right; +} + +.comment-meta .comment-reply a { + color: #eb5055 !important; +} + +.comment-view:hover .comment-meta .comment-reply { + display: block; +} + +.comment-parent > .comment-children .avatar { + width: 34px; + height: 34px; + margin: 3px 0 0 3px; +} + +.comment-parent > .comment-children .comment-author-at { + float: left; + margin-right: 5px; +} + +.comment-parent > .comment-children .comment-content { + margin: -3px 3px 10px; +} + +.comment-parent > .comment-children .comment-meta { + margin: 0 3px; +} + +.comment-form { + position: relative; + margin: 0 0 40px; + padding: 10px 20px; + border-radius: 3px; + background: #fff; + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, .04); + box-shadow: 0 1px 4px rgba(0, 0, 0, .04); +} + +.comment-form .form-control { + font-size: 13px; + display: block; + width: 100%; + height: 34px; + color: #313131; + outline: 0; +} + +.comment-form .form-control:focus { + border-color: #eb5055; + outline: 0; +} + +.comment-form textarea.form-control { + overflow: hidden; + height: 150px; + padding: 10px 0; + resize: none; + border-radius: 0; +} + +.comment-form .input-control { + float: left; + width: 100%; + max-width: 206px; + border-bottom: 1px dashed #ddd; + border-radius: 0; +} + +.comment-form .submit { + font-size: 13px; + position: absolute; + right: 20px; + bottom: 20px; + display: block; + height: 32px; + margin: 0 auto; + padding: 0 20px; + -webkit-transition-duration: 400ms; + transition-duration: 400ms; + text-align: center; + color: #313131; + border: 1px solid #f7f7f7; + border-radius: 30px; + background-color: #f7f7f7; +} + +.comment-form .submit:hover, .submit:focus, .submit:active, .submit:active:focus { + color: #eb5055; + border: 1px solid #eb5055; + outline-style: none; + background-color: #fff; +} + +/* ========================================================================== + #footer + ========================================================================== */ +.footer { + position: relative; + z-index: 1; + margin-top: 0; + padding-bottom: 50px; + background-color: #fff; +} + +.footer-social { + border-bottom: 1px solid rgba(184, 197, 214, .2); + box-shadow: 0 -2px 8px 0 rgba(239, 241, 243, 0.59); +} + +.footer-social .footer-container { + max-width: 940px; + margin: 0 auto; +} + +.footer-social .social-list { + padding: 20px; + text-align: center; + font-size: 1.3em; + font-family: "Abril Fatface", serif; +} + +.footer-social .social-list a { + font-size: 13px; + padding: 0 25px; + text-decoration: none; + color: #5f5f5f; +} + +.footer-meta { + padding: 50px 0 0; + list-style: none; + font-size: 1.3em; + font-family: "Abril Fatface", serif; +} + +.footer-meta .footer-container { + width: 100%; + max-width: 1024px; + height: 250px; + margin: 0 auto; +} + +.footer-meta .meta-item { + position: relative; + float: left; + width: 33.3333333%; + min-height: 1px; + padding: 0 30px; +} + +.footer-meta .meta-copyright .info-logo img { + height: 32px; + margin-bottom: 12px; +} + +.footer-meta .meta-copyright .info-text p { + font-size: 13px; + line-height: 20px; + margin: 0; + color: #767676; +} + +.footer-meta .meta-copyright .info-text a { + color: #767676; +} + +.footer-meta .meta-title { + font-size: 14px; + padding: 0 0 10px 0; + text-decoration: none; + color: #5f5f5f; +} + +.footer-meta .meta-posts li { + font-size: 13px; + line-height: 25px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #767676; +} + +.footer-meta .meta-posts li a { + color: #5f5f5f; +} + +.footer-meta .meta-comments li { + font-size: 13px; + line-height: 25px; + display: block; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; + color: #5f5f5f; +} + +.footer-meta .meta-comments li a { + color: #767676; +} /* ========================================================================== #reponse ========================================================================== */ -@media(max-width:1000px){ - .directory-content{display:none;} - .post-header-thumb{height:280px;} - .post-header-thumb-cover{height:280px;} - .post-header-thumb-op{height:280px;} - .post-header-thumb-container{top:80px;} -} -@media(max-width:880px){ - .index-page{padding:90px 0 0;} - .archive-page{padding:90px 0 20px;} - .common-page{padding:90px 0 0;} - .post-onelist-item-container{padding:50px 20px 55px;} - .post-list-item{width:50%;padding:10px;} - .post-list-item:nth-child(odd){padding-left:20px;} - .post-list-item:nth-child(even){padding-right:20px;} - .lists-navigator{margin:25px 0 30px;} - .post-header-thumb{height:250px;} - .post-header-thumb-op{height:250px;} - .post-header-thumb-cover{height:250px;} - .post-header-thumb-container{top:60px;} - .footer-meta .footer-container{padding:0;} - .main-content{margin:0 auto;} - .footer-meta .meta-item{padding:0 20px;} -} -@media(max-width:700px){ - .comment-form .input-control{max-width:100%;} - .post-header-thumb{height:220px;} - .post-header-thumb-op{height:220px;} - .post-header-thumb-cover{height:220px;} - .post-header-thumb-container{top:40px;} - .post-page{padding:30px 25px 0;} - .page-page{padding:100px 25px 0;} - .related-post-lists{padding-top:15px;} - .post-onelist-item-container{padding:20px 20px 25px;} - .post-onelist-item-container .onelist-item-thumb{min-height:240px;} -} -@media(max-width:650px){ - .navbar-menu{display:none;} - .navbar-search{padding:0 35px 0 0;} - .navbar-search form{width:180px;margin-right:55px;} - .navbar-mobile-menu{display:inline-block;} - .red-gradient{display:none;} - .meta-posts{display:none;} - .meta-comments{display:none;} - .post-page{padding:100px 25px 0;} - .common-page .post-list-item{width:100%;padding:10px 20px;} - .footer-social{display:none;} - .footer-meta .footer-container{height:70px;padding:0 15px;} - .footer-meta .meta-item{width:100%;padding:0 10px;} - .footer-meta .meta-copyright .info-text{float:right;} - .footer-meta .meta-copyright .info-text p{text-align:right;} - .post-onelist-item-container .onelist-item-thumb{min-height:220px;} - .post-header-thumb{display:none;} - .post-page .post-header{display:inherit;} - .post-page .post-content .post-tags{display:inherit;} -} -@media(max-width:580px){ - .navbar-search form{width:150px;} - .index-page{padding:80px 0 0;} - .archive-page{padding:80px 0 20px;} - .common-page{padding:80px 0 0;} - .post-list-item{width:100%;padding:10px 20px;} - .post-list-item:first-child{padding-top:20px;} - .archive-page .post-list-item:first-child{padding-top:0;} - .archive-page .post-list-item:last-child{padding-bottom:0;} - .common-page .post-list-item:first-child{padding-top:0;} - .related-post-lists{padding-top:5px;} - .main-content{margin:0 auto;} - .post-onelist-item-container{padding:20px 20px 25px;} - .post-onelist-item-container .item-content{display:none;} - .post-onelist-item-container .item-readmore{display:none;} - .post-onelist-item-container .onelist-item-thumb{min-height:180px;} +@media only screen and (max-width:980px) { + .directory-content { + display: none; + } +} + +@media (max-width: 1000px) { + .post-header-thumb { + height: 280px; + } + + .post-header-thumb-cover { + height: 280px; + } + + .post-header-thumb-op { + height: 280px; + } + + .post-header-thumb-container { + top: 80px; + } +} + +@media (max-width: 880px) { + .index-page { + padding: 90px 0 0; + } + + .archive-page { + padding: 90px 0 20px; + } + + .common-page { + padding: 90px 0 0; + } + + .post-onelist-item-container { + padding: 50px 20px 55px; + } + + .post-list-item { + width: 50%; + padding: 10px; + } + + .post-list-item:nth-child(odd) { + padding-left: 20px; + } + + .post-list-item:nth-child(even) { + padding-right: 20px; + } + + .lists-navigator { + margin: 25px 0 30px; + } + + .post-header-thumb { + height: 250px; + } + + .post-header-thumb-op { + height: 250px; + } + + .post-header-thumb-cover { + height: 250px; + } + + .post-header-thumb-container { + top: 60px; + } + + .footer-meta .footer-container { + padding: 0; + } + + .main-content { + margin: 0 auto; + } + + .footer-meta .meta-item { + padding: 0 20px; + } +} + +@media (max-width: 700px) { + .comment-form .input-control { + max-width: 100%; + } + + .post-header-thumb { + height: 220px; + } + + .post-header-thumb-op { + height: 220px; + } + + .post-header-thumb-cover { + height: 220px; + } + + .post-header-thumb-container { + top: 40px; + } + + .post-page { + padding: 30px 25px 0; + } + + .page-page { + padding: 100px 25px 0; + } + + .related-post-lists { + padding-top: 15px; + } + + .post-onelist-item-container { + padding: 20px 20px 25px; + } + + .post-onelist-item-container .onelist-item-thumb { + min-height: 240px; + } +} + +@media (max-width: 650px) { + .navbar-menu { + display: none; + } + + .navbar-search { + padding: 0 35px 0 0; + } + + .navbar-search form { + width: 180px; + margin-right: 55px; + } + + .navbar-mobile-menu { + display: inline-block; + } + + .red-gradient { + display: none; + } + + .meta-posts { + display: none; + } + + .meta-comments { + display: none; + } + + .post-page { + padding: 100px 25px 0; + } + + .common-page .post-list-item { + width: 100%; + padding: 10px 20px; + } + + .footer-social { + display: none; + } + + .footer-meta .footer-container { + height: 70px; + padding: 0 15px; + } + + .footer-meta .meta-item { + width: 100%; + padding: 0 10px; + } + + .footer-meta .meta-copyright .info-text { + float: right; + } + + .footer-meta .meta-copyright .info-text p { + text-align: right; + } + + .post-onelist-item-container .onelist-item-thumb { + min-height: 220px; + } + + .post-header-thumb { + display: none; + } + + .post-page .post-header { + display: inherit; + } + + .post-page .post-content .post-tags { + display: inherit; + } +} + +@media (max-width: 580px) { + .navbar-search form { + width: 150px; + } + .index-page { + padding: 80px 0 0; + } + + .archive-page { + padding: 80px 0 20px; + } + + .common-page { + padding: 80px 0 0; + } + + .post-list-item { + width: 100%; + padding: 10px 20px; + } + + .post-list-item:first-child { + padding-top: 20px; + } + + .archive-page .post-list-item:first-child { + padding-top: 0; + } + + .archive-page .post-list-item:last-child { + padding-bottom: 0; + } + + .common-page .post-list-item:first-child { + padding-top: 0; + } + + .related-post-lists { + padding-top: 5px; + } + + .main-content { + margin: 0 auto; + } + + .post-onelist-item-container { + padding: 20px 20px 25px; + } + + .post-onelist-item-container .item-content { + display: none; + } + + .post-onelist-item-container .item-readmore { + display: none; + } + + .post-onelist-item-container .onelist-item-thumb { + min-height: 180px; + } } -- GitLab