wy
2 years ago
4 changed files with 1469 additions and 3 deletions
@ -0,0 +1,755 @@ |
|||
@media only screen and (min-width: 992px) and (max-width: 1199px) { |
|||
.services-inner-box h2 { |
|||
left: 100px; |
|||
} |
|||
|
|||
.services-inner-box { |
|||
padding: 5px; |
|||
} |
|||
|
|||
.services-inner-box h2 { |
|||
top: 20px; |
|||
font-size: 18px; |
|||
} |
|||
|
|||
.services-inner-box p { |
|||
bottom: -5px; |
|||
} |
|||
|
|||
.home-bottom div { |
|||
line-height: 90px; |
|||
font-size: 30px; |
|||
} |
|||
|
|||
.heading h1 { |
|||
font-size: 25px; |
|||
} |
|||
|
|||
.home-bottom { |
|||
height: 90px; |
|||
} |
|||
|
|||
.about-img { |
|||
width: 90%; |
|||
} |
|||
|
|||
.opus-grid:hover .opus-title, |
|||
.demo-grid:hover .demo-title { |
|||
color: #4a4b65; |
|||
} |
|||
|
|||
#opus.body_dark .opus-grid:hover .opus-title, |
|||
#demo.body_dark .demo-grid:hover .demo-title { |
|||
color: #aaaaaa; |
|||
} |
|||
|
|||
.like-wrapper { |
|||
margin-left: 63px; |
|||
} |
|||
|
|||
.article-single h2 { |
|||
font-size: 20px !important; |
|||
} |
|||
} |
|||
|
|||
@media (min-width: 768px) and (max-width: 991px) { |
|||
.services-inner-box h2 { |
|||
left: 95px; |
|||
} |
|||
|
|||
.navbar-dark .navbar-brand { |
|||
width: 120px; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link::after { |
|||
display: none; |
|||
} |
|||
|
|||
.navbar-dark .navbar-toggler { |
|||
color: #333; |
|||
border-color: #333; |
|||
-webkit-transition: all .5s; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.navbar-dark.body_dark .navbar-toggler { |
|||
color: #ddd; |
|||
border-color: #ddd; |
|||
-webkit-transition: all .5s; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
#about .message-box h3, .section-title h3 { |
|||
font-size: 28px; |
|||
margin: 0 0 15px; |
|||
} |
|||
|
|||
#about img { |
|||
margin-top: 53px; |
|||
} |
|||
|
|||
.section-title p { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.filter-button-group button { |
|||
padding: 5px 10px; |
|||
margin: 4px 2px; |
|||
} |
|||
|
|||
.filter-button-group { |
|||
text-align: center !important; |
|||
margin: 0; |
|||
} |
|||
|
|||
.post-box { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.footer-distributed .footer-left { |
|||
text-align: center; |
|||
} |
|||
|
|||
.toggle { |
|||
margin: 0 !important; |
|||
} |
|||
|
|||
.heading h1 { |
|||
font-size: 25px; |
|||
letter-spacing: .15em; |
|||
} |
|||
|
|||
.heading p { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.section { |
|||
padding: 100px 0 53px; |
|||
} |
|||
|
|||
.section-title { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.post-box .date { |
|||
padding: 5px 10px; |
|||
} |
|||
|
|||
body::after { |
|||
background-size: auto 100%; |
|||
} |
|||
|
|||
.navbar { |
|||
padding: .5rem 1rem; |
|||
} |
|||
|
|||
#mainNav .navbar-collapse { |
|||
padding: 0; |
|||
} |
|||
|
|||
#git { |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
#git .section-title, #contact .section-title { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.home-bottom { |
|||
padding: 10px 25px; |
|||
margin: 3px 0; |
|||
} |
|||
|
|||
.home-bottom div { |
|||
line-height: 80px; |
|||
font-size: 25px; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active { |
|||
border-bottom: 2px solid rgba(0, 0, 0, 0) !important; |
|||
} |
|||
|
|||
.heading .h1-top { |
|||
margin-top: 100px; |
|||
} |
|||
|
|||
.about-img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.footer-right { |
|||
float: left !important; |
|||
} |
|||
|
|||
.copyrights { |
|||
padding: 3px 0 0 !important; |
|||
} |
|||
|
|||
.services-inner-box { |
|||
padding: 0; |
|||
margin: 20px 0 0; |
|||
} |
|||
|
|||
.ser-icon i { |
|||
display: none; |
|||
} |
|||
|
|||
.services-inner-box h2 { |
|||
top: 20px; |
|||
left: 20px; |
|||
font-size: 16px; |
|||
} |
|||
|
|||
.services-inner-box p { |
|||
margin-bottom: 0.7rem; |
|||
} |
|||
|
|||
.footer-distributed { |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
.footer-links a, .footer-links span { |
|||
font-size: 11px !important; |
|||
} |
|||
|
|||
.footer-links img { |
|||
width: 14px; |
|||
} |
|||
|
|||
#contact { |
|||
padding: 20px 0 60px; |
|||
} |
|||
|
|||
.note-menu, .api-menu { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.note-single, .api-single { |
|||
margin: 12px 0 18px; |
|||
} |
|||
|
|||
body { |
|||
background-size: auto 100%; |
|||
} |
|||
|
|||
.clock { |
|||
top: 4rem; |
|||
} |
|||
|
|||
.opus-grid:hover .opus-title, |
|||
.demo-grid:hover .demo-title { |
|||
color: #4a4b65; |
|||
} |
|||
|
|||
#opus.body_dark .opus-grid:hover .opus-title, |
|||
#demo.body_dark .demo-grid:hover .demo-title { |
|||
color: #aaaaaa; |
|||
} |
|||
|
|||
.like-wrapper { |
|||
bottom: 3%; |
|||
left: 50%; |
|||
margin-left: 55px; |
|||
} |
|||
|
|||
.like { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.article-all { |
|||
padding: 0; |
|||
} |
|||
|
|||
.article-title h3 { |
|||
font-size: 28px; |
|||
margin: 0 0 15px; |
|||
} |
|||
|
|||
.article-single h2 { |
|||
font-size: 18px !important; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 767px) { |
|||
.navbar-dark .navbar-brand { |
|||
width: 120px; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link::after { |
|||
display: none; |
|||
} |
|||
|
|||
.navbar-dark .navbar-toggler { |
|||
color: #333; |
|||
border-color: #333; |
|||
-webkit-transition: all .5s; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.navbar-dark.body_dark .navbar-toggler { |
|||
color: #ddd; |
|||
border-color: #ddd; |
|||
-webkit-transition: all .5s; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
#about .message-box h3, .section-title h3 { |
|||
font-size: 28px; |
|||
margin: 0 0 15px; |
|||
} |
|||
|
|||
#about img { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.section-title p { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.filter-button-group button { |
|||
padding: 5px 10px; |
|||
margin: 4px 2px; |
|||
} |
|||
|
|||
.filter-button-group { |
|||
text-align: center !important; |
|||
margin: 0; |
|||
} |
|||
|
|||
.post-box { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.footer-distributed .footer-left { |
|||
text-align: center; |
|||
} |
|||
|
|||
.toggle { |
|||
margin: 0 !important; |
|||
} |
|||
|
|||
.heading h1 { |
|||
font-size: 25px; |
|||
letter-spacing: .15em; |
|||
} |
|||
|
|||
.heading p { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.section { |
|||
padding: 100px 0 53px; |
|||
} |
|||
|
|||
.section-title { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.post-box .date { |
|||
padding: 5px 10px; |
|||
} |
|||
|
|||
body::after { |
|||
background-size: auto 100%; |
|||
} |
|||
|
|||
.navbar { |
|||
padding: .5rem 1rem; |
|||
} |
|||
|
|||
#mainNav .navbar-collapse { |
|||
padding: 0; |
|||
} |
|||
|
|||
#git { |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
#git .section-title, #contact .section-title { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.home-bottom { |
|||
padding: 10px 25px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.home-bottom div { |
|||
line-height: 80px; |
|||
font-size: 25px; |
|||
} |
|||
|
|||
|
|||
.navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active { |
|||
border-bottom: 2px solid rgba(0, 0, 0, 0) !important; |
|||
} |
|||
|
|||
.heading .h1-top { |
|||
margin-top: 110px; |
|||
} |
|||
|
|||
.about-img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.footer-right { |
|||
float: left !important; |
|||
} |
|||
|
|||
.copyrights { |
|||
padding: 2px 0 0 !important; |
|||
} |
|||
|
|||
.services-inner-box { |
|||
padding: 0; |
|||
margin: 20px 0 0; |
|||
} |
|||
|
|||
.services-inner-box h2 { |
|||
top: 20px; |
|||
left: 100px; |
|||
} |
|||
|
|||
.services-inner-box p { |
|||
margin-bottom: 0.7rem; |
|||
} |
|||
|
|||
.footer-distributed { |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
.footer-links a, .footer-links span { |
|||
font-size: 11px !important; |
|||
} |
|||
|
|||
.footer-links img { |
|||
width: 14px; |
|||
} |
|||
|
|||
#contact { |
|||
padding: 20px 0 60px; |
|||
} |
|||
|
|||
.note-menu, .api-menu { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.note-single, .api-single { |
|||
margin: 12px 0 18px; |
|||
} |
|||
|
|||
body { |
|||
background-size: auto 100%; |
|||
} |
|||
|
|||
.clock { |
|||
top: 5rem; |
|||
} |
|||
|
|||
.opus-grid:hover .opus-title, |
|||
.demo-grid:hover .demo-title { |
|||
color: #4a4b65; |
|||
} |
|||
|
|||
#opus.body_dark .opus-grid:hover .opus-title, |
|||
#demo.body_dark .demo-grid:hover .demo-title { |
|||
color: #aaaaaa; |
|||
} |
|||
|
|||
.like-wrapper { |
|||
bottom: 3%; |
|||
left: 50%; |
|||
margin-left: 55px; |
|||
} |
|||
|
|||
.like { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.article-all { |
|||
padding: 0; |
|||
} |
|||
|
|||
.article-title h3 { |
|||
font-size: 28px; |
|||
margin: 0 0 15px; |
|||
} |
|||
|
|||
.article-single h2 { |
|||
font-size: 20px !important; |
|||
} |
|||
} |
|||
|
|||
@media only screen and (min-width: 280px) and (max-width: 599px) { |
|||
.navbar-dark .navbar-brand { |
|||
width: 120px; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link::after { |
|||
display: none; |
|||
} |
|||
|
|||
.navbar-dark .navbar-toggler { |
|||
color: #333; |
|||
border-color: #333; |
|||
-webkit-transition: all .5s; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
.navbar-dark.body_dark .navbar-toggler { |
|||
color: #ddd; |
|||
border-color: #ddd; |
|||
-webkit-transition: all .5s; |
|||
transition: all .5s; |
|||
} |
|||
|
|||
#about .message-box h3, .section-title h3 { |
|||
font-size: 28px; |
|||
margin: 0 0 15px; |
|||
} |
|||
|
|||
#about img { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.section-title p { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.filter-button-group button { |
|||
padding: 5px 10px; |
|||
margin: 4px 2px; |
|||
} |
|||
|
|||
.filter-button-group { |
|||
text-align: center !important; |
|||
margin: 0; |
|||
} |
|||
|
|||
.post-box { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.footer-distributed .footer-left { |
|||
text-align: center; |
|||
} |
|||
|
|||
.toggle { |
|||
margin: 0 !important; |
|||
} |
|||
|
|||
.heading h1 { |
|||
font-size: 25px; |
|||
letter-spacing: .15em; |
|||
} |
|||
|
|||
.heading p { |
|||
font-size: 14px; |
|||
} |
|||
|
|||
.section { |
|||
padding: 100px 0 45px; |
|||
} |
|||
|
|||
.section-title { |
|||
margin-bottom: 20px; |
|||
} |
|||
|
|||
.post-box .date { |
|||
padding: 5px 10px; |
|||
} |
|||
|
|||
body::after { |
|||
background-size: auto 100%; |
|||
} |
|||
|
|||
.navbar { |
|||
padding: .5rem 1rem; |
|||
} |
|||
|
|||
#mainNav .navbar-collapse { |
|||
padding: 0; |
|||
} |
|||
|
|||
#git { |
|||
padding-bottom: 20px; |
|||
} |
|||
|
|||
#git .section-title, #contact .section-title { |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.home-bottom { |
|||
height: 70px; |
|||
padding: 10px; |
|||
margin: 0; |
|||
} |
|||
|
|||
.home-bottom div { |
|||
line-height: 50px; |
|||
font-size: 22px; |
|||
} |
|||
|
|||
|
|||
.navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .navbar-dark .navbar-nav .nav-item.active { |
|||
border-bottom: 2px solid rgba(0, 0, 0, 0) !important; |
|||
} |
|||
|
|||
.heading .h1-top { |
|||
margin-top: 110px; |
|||
} |
|||
|
|||
.about-img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.footer-right { |
|||
float: left !important; |
|||
} |
|||
|
|||
.copyrights { |
|||
padding: 8px 0 !important; |
|||
} |
|||
|
|||
.services-inner-box, .article-single { |
|||
padding: 0; |
|||
margin: 20px 0 0; |
|||
-webkit-box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white); |
|||
box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white); |
|||
} |
|||
|
|||
.services-inner-box:active, .article-single:active { |
|||
-webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white; |
|||
box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white; |
|||
} |
|||
|
|||
.services-inner-box.body_dark, .article-single.body_dark { |
|||
-webkit-box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.4), -.1rem -.1rem .2rem rgba(66, 66, 66, 0.4); |
|||
box-shadow: .1rem .1rem .2rem rgba(0, 0, 0, 0.4), -.1rem -.1rem .2rem rgba(66, 66, 66, 0.4); |
|||
} |
|||
|
|||
.services-inner-box.body_dark:active, .article-single.body_dark:active { |
|||
-webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2); |
|||
box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2); |
|||
} |
|||
|
|||
.services-inner-box h2 { |
|||
top: 20px; |
|||
left: 100px; |
|||
} |
|||
|
|||
.services-inner-box p { |
|||
margin-bottom: 0.7rem; |
|||
} |
|||
|
|||
.footer-distributed { |
|||
margin: 10px 0; |
|||
} |
|||
|
|||
.footer-links a, .footer-links span { |
|||
font-size: 12px !important; |
|||
} |
|||
|
|||
.footer-links img { |
|||
width: 16px; |
|||
} |
|||
|
|||
#contact { |
|||
padding: 20px 0 60px; |
|||
} |
|||
|
|||
.note-menu, .api-menu { |
|||
margin-bottom: 15px; |
|||
} |
|||
|
|||
.note-single, .api-single { |
|||
margin: 12px 0 18px; |
|||
} |
|||
|
|||
body { |
|||
background-size: auto 100%; |
|||
} |
|||
|
|||
.opus-grid:hover .opus-title, |
|||
.demo-grid:hover .demo-title { |
|||
color: #4a4b65; |
|||
} |
|||
|
|||
#opus.body_dark .opus-grid:hover .opus-title, |
|||
#demo.body_dark .demo-grid:hover .demo-title { |
|||
color: #aaaaaa; |
|||
} |
|||
|
|||
.like-wrapper { |
|||
bottom: 6%; |
|||
left: 50%; |
|||
margin-left: 50px; |
|||
} |
|||
|
|||
.like { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.dmtop.show { |
|||
bottom: 82px; |
|||
} |
|||
|
|||
.footer-right { |
|||
display: none; |
|||
} |
|||
|
|||
#about .message-box p { |
|||
-o-user-select: none; |
|||
-moz-user-select: none; |
|||
-webkit-user-select: none; |
|||
-ms-user-select: none; |
|||
-khtml-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
.article-single { |
|||
height: 80px !important; |
|||
padding: 10px !important; |
|||
margin: 10px 0 12px !important; |
|||
} |
|||
|
|||
.article-single h2 { |
|||
font-size: 20px !important; |
|||
margin-right: 5px !important; |
|||
} |
|||
|
|||
.article-single p { |
|||
right: 20px !important; |
|||
bottom: 0 !important; |
|||
margin-bottom: 10px !important; |
|||
} |
|||
|
|||
.home-bottom div, .clock, .body-login .btn, #contact .contact_form, #sendMessageButton, .checkbox__1 label { |
|||
-webkit-box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white); |
|||
box-shadow: 0.1rem 0.1rem 0.2rem var(--greyLight-2), -0.1rem -0.1rem 0.2rem var(--white); |
|||
} |
|||
|
|||
#contact.body_dark .checkbox__1 label, #contact.body_dark #sendMessageButton, #home.body_dark .home-bottom div, body.body_dark .clock, body.body_dark .btn-default, #contact.body_dark .contact_form { |
|||
-webkit-box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), -0.1rem -0.1rem 0.2rem var(--primary-dark); |
|||
box-shadow: 0.1rem 0.1rem 0.2rem var(--greyDark), -0.1rem -0.1rem 0.2rem var(--primary-dark); |
|||
} |
|||
|
|||
.checkbox__1 input:checked ~ label, .home-bottom div:active, .clock .marker, .body-login .btn:active, .body-login .form-group .input, #contact .contact_form .form-group, #sendMessageButton:active { |
|||
-webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem var(--white); |
|||
box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem var(--white); |
|||
} |
|||
|
|||
#contact.body_dark .checkbox__1 input:checked ~ label, #contact.body_dark #sendMessageButton:active, #home.body_dark .home-bottom div:active, body.body_dark .clock .marker, body.body_dark .clock .marker::after, body.body_dark .body-login .form-group .input, body.body_dark .btn-default:active, #contact.body_dark .contact_form .form-group { |
|||
box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyDark), inset -0.1rem -0.1rem 0.2rem var(--primary-dark-2); |
|||
} |
|||
|
|||
.dmtop { |
|||
-webkit-box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.12), -0.1rem -0.1rem 0.2rem rgba(255, 255, 255, 0.7); |
|||
box-shadow: 0.1rem 0.1rem 0.2rem rgba(0, 0, 0, 0.12), -0.1rem -0.1rem 0.2rem rgba(255, 255, 255, 0.7); |
|||
} |
|||
|
|||
.dmtop:active { |
|||
-webkit-box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white; |
|||
box-shadow: inset 0.1rem 0.1rem 0.2rem var(--greyLight-2), inset -0.1rem -0.1rem 0.2rem white; |
|||
} |
|||
} |
|||
@ -0,0 +1,695 @@ |
|||
:root { |
|||
--primary-light: #8abdff; |
|||
--primary: #6d5dfc; |
|||
--light-navbar: #E4EBF8; |
|||
--dark-navbar: #191c23; |
|||
--primary-dark: #2f2f32; |
|||
--primary-dark-2: #39393c; |
|||
--greyLight-1: #E4EBF8; |
|||
--greyLight-2: #c8d0e7; |
|||
--greyLight-3: #1c1c1d; |
|||
--greyDark: #091318; |
|||
--greyBodyDark: #1a1d24; |
|||
--a-dark-hover: #68a7eb; |
|||
--white: #ffffff; |
|||
--darkorange: rgb(255, 153, 0); |
|||
} |
|||
|
|||
body { |
|||
color: #999999; |
|||
font-size: 14px; |
|||
-webkit-font-smoothing: antialiased; |
|||
font-family: "Microsoft Yahei Light", "Microsoft Yahei", PingFangSC-Regular, Helvetica, sans-serif; |
|||
line-height: 1.80857; |
|||
background-color: var(--greyLight-1); |
|||
letter-spacing: 0.1em; |
|||
-o-user-select: none; |
|||
-moz-user-select: none; |
|||
-webkit-user-select: none; |
|||
-ms-user-select: none; |
|||
-khtml-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
#about .message-box p, .blog { |
|||
-o-user-select: text; |
|||
-moz-user-select: text; |
|||
-webkit-user-select: text; |
|||
-ms-user-select: text; |
|||
-khtml-user-select: text; |
|||
user-select: text; |
|||
} |
|||
|
|||
.go-back, .like, .contact_form .form-control, .checkbox__1 label span, .checkbox__1 label, .filter-button-group button, .clock, .clock .marker span, .clock .marker, .clock .marker::after, td, th, .text-primary, code, body, .section, .contact_form .input, .about-img img, .contact_form, .contact_form .form-group, #sendMessageButton, .footer-links span, .btn, .btn:hover, h3, h3:hover, .heading h1, .navbar-dark .navbar-nav .nav-item, .navbar-dark .navbar-nav .nav-item:hover, .heading h3 span, .heading h3 span:hover, a, .toggle, .home-bottom div, .home-bottom div:hover, .navbar-dark .navbar-nav .nav-link::after, .services-inner-box, .services-inner-box:hover, .post-info span, .services-inner-box p span, .services-inner-box i, .demo-single, .demo-single:hover, .demo-title, .demo-grid:hover .demo-title, .opus-single, .opus-single:hover, .opus-title, .opus-grid:hover .opus-title, .post-box, .post-box:hover, .post-box .post-thumb::before, .navbar-brand p, #mainNav .logo, #mainNav .logo-dark, #mainNav.body_dark .logo, #mainNav.body_dark .logo-dark, .navbar.body_dark .navbar-brand p, .section.body_dark .post-box .post-thumb::before, .btn-hover-new { |
|||
-webkit-transition: all .3s ease-in-out; |
|||
-moz-transition: all .3s ease-in-out; |
|||
-ms-transition: all .3s ease-in-out; |
|||
-o-transition: all .3s ease-in-out; |
|||
transition: all .3s ease-in-out; |
|||
} |
|||
|
|||
a { |
|||
color: #1f1f1f; |
|||
text-decoration: none !important; |
|||
outline: none !important; |
|||
} |
|||
|
|||
a:hover { |
|||
color: var(--darkorange); |
|||
} |
|||
|
|||
h1, h2, h3, h4, h5, h6 { |
|||
letter-spacing: 0; |
|||
font-weight: normal; |
|||
position: relative; |
|||
padding: 0 0 10px 0; |
|||
font-weight: normal; |
|||
line-height: 120% !important; |
|||
color: #333333; |
|||
margin: 0 |
|||
} |
|||
|
|||
h1 { |
|||
font-size: 24px |
|||
} |
|||
|
|||
h2 { |
|||
font-size: 22px |
|||
} |
|||
|
|||
h3 { |
|||
font-size: 18px |
|||
} |
|||
|
|||
h4 { |
|||
font-size: 16px |
|||
} |
|||
|
|||
h5 { |
|||
font-size: 14px |
|||
} |
|||
|
|||
h6 { |
|||
font-size: 13px |
|||
} |
|||
|
|||
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { |
|||
color: #212121; |
|||
text-decoration: none !important; |
|||
opacity: 1 |
|||
} |
|||
|
|||
h1 a:hover, h2 a:hover, h3 a:hover, h4 a:hover, h5 a:hover, h6 a:hover { |
|||
opacity: .8 |
|||
} |
|||
|
|||
ul, li, ol { |
|||
margin: 0; |
|||
list-style: none; |
|||
padding: 0; |
|||
} |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
|
|||
/*------------------------------------------------------------------ |
|||
HEADER |
|||
-------------------------------------------------------------------*/ |
|||
.navbar { |
|||
background-color: rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.navbar-dark { |
|||
-webkit-transition: all 0.5s; |
|||
-moz-transition: all 0.5s; |
|||
-o-transition: all 0.5s; |
|||
transition: all 0.5s; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-item { |
|||
border-bottom: 2px solid rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-item:hover { |
|||
border-bottom: 2px solid #333333; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-item.active { |
|||
border-bottom: 2px solid var(--darkorange); |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-item.active a, .footer-links a.active { |
|||
color: var(--darkorange) !important; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link { |
|||
width: 100%; |
|||
text-align: center; |
|||
color: white; |
|||
font-size: 14px; |
|||
position: relative; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link:hover { |
|||
color: white; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link.active { |
|||
font-weight: 600; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link::after { |
|||
content: ''; |
|||
width: 0; |
|||
height: 3px; |
|||
background: white; |
|||
position: absolute; |
|||
bottom: 0; |
|||
left: 0; |
|||
right: 0; |
|||
text-align: center; |
|||
margin: 0 auto; |
|||
border-radius: 0; |
|||
z-index: -1; |
|||
} |
|||
|
|||
.navbar-dark .navbar-nav .nav-link.active::after { |
|||
width: 50%; |
|||
} |
|||
|
|||
/*------------------------------------------------------------------ |
|||
SECTIONS |
|||
-------------------------------------------------------------------*/ |
|||
/* 自动显示隐藏导航栏（优化版） */ |
|||
.show-none { |
|||
top: -60px; |
|||
} |
|||
|
|||
/* 导航栏背景色 */ |
|||
#mainNav.navbar-shrink { |
|||
background-color: var(--light-navbar); |
|||
-webkit-transition: all 0.5s; |
|||
-moz-transition: all 0.5s; |
|||
-o-transition: all 0.5s; |
|||
transition: all 0.5s; |
|||
box-shadow: 0.15rem 0.15rem 0.3rem rgba(0, 0, 0, 0.08), 0 0 0 rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
/* 导航栏菜单文本颜色 */ |
|||
#mainNav .nav-link, #mainNav .nav-link:hover { |
|||
color: var(--greyBodyDark); |
|||
} |
|||
|
|||
#mainNav.navbar-shrink .nav-link, #mainNav.navbar-shrink .nav-link:hover { |
|||
color: var(--greyBodyDark); |
|||
} |
|||
|
|||
.navbar { |
|||
padding: 0; |
|||
} |
|||
|
|||
#mainNav .navbar-collapse { |
|||
padding: 0.5rem 0; |
|||
} |
|||
|
|||
button:focus { |
|||
outline: none !important; |
|||
} |
|||
|
|||
.section { |
|||
display: block; |
|||
position: relative; |
|||
overflow: hidden; |
|||
padding: 120px 0 88px; |
|||
} |
|||
|
|||
.section-title { |
|||
display: block; |
|||
position: relative; |
|||
margin-bottom: 30px; |
|||
} |
|||
|
|||
.section-title h3 { |
|||
font-size: 38px; |
|||
line-height: 62px; |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
color: #222222; |
|||
text-transform: none; |
|||
letter-spacing: 10px; |
|||
} |
|||
|
|||
.btn-hover-new { |
|||
color: #333333; |
|||
position: relative; |
|||
background-color: #fff; |
|||
overflow: hidden; |
|||
padding: 0 18px; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.sim-btn { |
|||
line-height: 55px; |
|||
height: 55px; |
|||
width: 90%; |
|||
border-radius: 0.3em; |
|||
text-align: center; |
|||
margin-right: auto; |
|||
margin-left: auto; |
|||
margin-top: 0; |
|||
cursor: pointer; |
|||
} |
|||
|
|||
.btn-hover-new:hover { |
|||
color: white; |
|||
background-color: #333333; |
|||
} |
|||
|
|||
.services-inner-box { |
|||
position: relative; |
|||
padding: 15px; |
|||
background: var(--greyLight-1); |
|||
margin-bottom: 30px; |
|||
border-radius: 1em; |
|||
-webkit-box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white); |
|||
box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white); |
|||
} |
|||
|
|||
.services-inner-box:active, .article-single:active { |
|||
-webkit-box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white; |
|||
box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white; |
|||
} |
|||
|
|||
.article-single { |
|||
position: relative; |
|||
height: 100px; |
|||
margin: 20px 0 20px; |
|||
padding: 15px; |
|||
border-radius: 1em; |
|||
-webkit-box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white); |
|||
box-shadow: .2rem .2rem .4rem var(--greyLight-2), -.2rem -.2rem .4rem var(--white); |
|||
-o-user-select: none; |
|||
-moz-user-select: none; |
|||
-webkit-user-select: none; |
|||
-ms-user-select: none; |
|||
-khtml-user-select: none; |
|||
user-select: none; |
|||
} |
|||
|
|||
.article-single h2 { |
|||
position: absolute; |
|||
font-size: 21px; |
|||
font-weight: 600; |
|||
top: 25px; |
|||
left: 30px; |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
.ser-icon { |
|||
float: left; |
|||
width: 90px; |
|||
height: 90px; |
|||
text-align: center; |
|||
line-height: 90px; |
|||
} |
|||
|
|||
.ser-icon i { |
|||
font-size: 50px; |
|||
color: #333333; |
|||
} |
|||
|
|||
.services-inner-box h2 { |
|||
position: absolute; |
|||
font-size: 22px; |
|||
font-weight: 600; |
|||
top: 30px; |
|||
left: 120px; |
|||
padding-right: 10px; |
|||
} |
|||
|
|||
.services-inner-box p, .article-single p { |
|||
color: #333; |
|||
position: absolute; |
|||
right: 20px; |
|||
bottom: 0; |
|||
} |
|||
|
|||
.services-inner-box p span { |
|||
color: #333333; |
|||
} |
|||
|
|||
.services-inner-box:active > h2, .article-single:active > h2 { |
|||
color: var(--darkorange); |
|||
} |
|||
|
|||
/*------------------------------------------------------------------ |
|||
PORTFOLIO |
|||
-------------------------------------------------------------------*/ |
|||
/* 滚动特效 */ |
|||
.isotope-item { |
|||
z-index: 2; |
|||
} |
|||
|
|||
.isotope-hidden.isotope-item { |
|||
pointer-events: none; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.isotope, .isotope .isotope-item { |
|||
-webkit-transition-duration: 0.8s; |
|||
-moz-transition-duration: 0.8s; |
|||
transition-duration: 0.8s; |
|||
} |
|||
|
|||
.isotope { |
|||
-webkit-transition-property: height, width; |
|||
-moz-transition-property: height, width; |
|||
transition-property: height, width; |
|||
} |
|||
|
|||
.isotope .isotope-item { |
|||
-webkit-transition-property: -webkit-transform, opacity; |
|||
-moz-transition-property: -moz-transform, opacity; |
|||
transition-property: transform, opacity; |
|||
} |
|||
|
|||
.filter-button-group { |
|||
border-radius: 0; |
|||
margin: 10px 0; |
|||
display: inline-block; |
|||
} |
|||
|
|||
.filter-button-group button.active { |
|||
color: var(--darkorange); |
|||
outline: none; |
|||
background: rgba(0, 0, 0, 0); |
|||
box-shadow: inset 0.15rem 0.15rem 0.2rem var(--greyLight-2), inset -0.15rem -0.15rem 0.2rem white; |
|||
} |
|||
|
|||
.filter-button-group button { |
|||
border: none; |
|||
color: #333; |
|||
letter-spacing: 1px; |
|||
font-weight: 600; |
|||
font-size: 14px; |
|||
cursor: pointer; |
|||
background: rgba(0, 0, 0, 0); |
|||
padding: 8px 24px; |
|||
margin: 0 3px; |
|||
border-radius: 0.3em; |
|||
outline: none; |
|||
box-shadow: .1rem .1rem .2rem var(--greyLight-2), -.1rem -.1rem .2rem var(--white); |
|||
} |
|||
|
|||
/*------------------------------------------------------------------ |
|||
FOOTER |
|||
-------------------------------------------------------------------*/ |
|||
.footer-links { |
|||
list-style: none; |
|||
padding: 0; |
|||
margin: 0; |
|||
} |
|||
|
|||
.footer-links a, .footer-links span { |
|||
color: #999999; |
|||
font-size: 13px; |
|||
} |
|||
|
|||
.footer-links a.footer-links-gov { |
|||
font-size: 12px; |
|||
} |
|||
|
|||
.footer-links img { |
|||
position: relative; |
|||
width: 17px; |
|||
top: -1px; |
|||
} |
|||
|
|||
.footer-links a:hover, .footer a:hover, .footer-links a .iconfont:hover { |
|||
color: var(--darkorange) !important; |
|||
} |
|||
|
|||
.copyrights { |
|||
box-sizing: border-box; |
|||
width: 100%; |
|||
text-align: left; |
|||
padding: 25px 0 !important; |
|||
overflow: hidden; |
|||
box-shadow: 0 0 0 rgba(0, 0, 0, 0), -0.2rem -0.2rem 0.4rem rgba(255, 255, 255, 0.45); |
|||
} |
|||
|
|||
/* Footer left */ |
|||
.footer-distributed .footer-left { |
|||
float: left; |
|||
} |
|||
|
|||
.footer-distributed .footer-right { |
|||
float: right; |
|||
} |
|||
|
|||
.footer-distributed .footer-links { |
|||
margin: 0 0 10px; |
|||
padding: 0; |
|||
} |
|||
|
|||
.footer-distributed .footer-links a { |
|||
line-height: 1.8; |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.copyrights .modal .modal-dialog { |
|||
position: fixed; |
|||
left: 50%; |
|||
margin-left: -100px; |
|||
bottom: 130px; |
|||
} |
|||
|
|||
.copyrights .modal img { |
|||
border-radius: 0.3em; |
|||
} |
|||
|
|||
/*------------------------------------------------------------------ |
|||
MISC |
|||
-------------------------------------------------------------------*/ |
|||
.dmtop.show { |
|||
bottom: 85px; |
|||
z-index: 10; |
|||
} |
|||
|
|||
.dmtop { |
|||
background-color: var(--greyLight-1); |
|||
z-index: 100; |
|||
width: 50px; |
|||
height: 50px; |
|||
line-height: 47px; |
|||
position: fixed; |
|||
bottom: -100px; |
|||
border-radius: 3px; |
|||
right: 50px; |
|||
text-align: center; |
|||
font-size: 28px; |
|||
color: #777777 !important; |
|||
cursor: pointer; |
|||
-webkit-transition: all .5s ease-in-out; |
|||
-moz-transition: all .5s ease-in-out; |
|||
-o-transition: all .5s ease-in-out; |
|||
-ms-transition: all .5s ease-in-out; |
|||
transition: all .5s ease-in-out; |
|||
box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.12), -0.2rem -0.2rem 0.4rem rgba(255, 255, 255, 0.7); |
|||
} |
|||
|
|||
.dmtop:active { |
|||
-webkit-box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white; |
|||
box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyLight-2), inset -0.2rem -0.2rem 0.4rem white; |
|||
} |
|||
|
|||
/* logo */ |
|||
.navbar-brand { |
|||
width: 120px; |
|||
height: 32px; |
|||
margin: -1px 0 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
.navbar-brand p { |
|||
margin: 0; |
|||
padding: 0 10px; |
|||
text-align: center; |
|||
color: #000; |
|||
} |
|||
|
|||
.toggle { |
|||
position: relative; |
|||
display: inline-block; |
|||
width: 50px; |
|||
height: 38px; |
|||
font-size: 45px !important; |
|||
line-height: 38px; |
|||
margin-right: 5px; |
|||
color: var(--greyBodyDark); |
|||
transition: all 500ms; |
|||
} |
|||
|
|||
.toggle:hover { |
|||
color: #222222; |
|||
} |
|||
|
|||
/*------------------------------------------------------------------ |
|||
dark模式 |
|||
-------------------------------------------------------------------*/ |
|||
#mainNav .logo, #mainNav .logo-dark, #mainNav.body_dark .logo, #mainNav.body_dark .logo-dark { |
|||
position: absolute; |
|||
} |
|||
|
|||
#mainNav .logo, #mainNav.body_dark .logo-dark { |
|||
opacity: 1; |
|||
} |
|||
|
|||
#mainNav.body_dark .logo, #mainNav .logo-dark { |
|||
opacity: 0; |
|||
} |
|||
|
|||
.navbar.body_dark .navbar-brand p { |
|||
color: #f2f3f4; |
|||
} |
|||
|
|||
.navbar-dark.body_dark .navbar-nav .nav-item:hover { |
|||
border-bottom: 2px solid #f2f3f5; |
|||
} |
|||
|
|||
.navbar-dark.body_dark .navbar-nav .nav-item.active { |
|||
border-bottom: 2px solid var(--a-dark-hover); |
|||
} |
|||
|
|||
.navbar-dark.body_dark .navbar-nav .nav-item.active a, body.body_dark .footer-links a.active { |
|||
color: var(--a-dark-hover) !important; |
|||
} |
|||
|
|||
.services-inner-box.body_dark, body.body_dark .dmtop, .article-single.body_dark { |
|||
background-color: var(--greyBodyDark); |
|||
box-shadow: 0.2rem 0.2rem 0.4rem rgba(0, 0, 0, 0.4), -0.2rem -0.2rem 0.4rem rgba(66, 66, 66, 0.4); |
|||
} |
|||
|
|||
body.body_dark .dmtop { |
|||
color: #999999 !important; |
|||
} |
|||
|
|||
.section.body_dark .post-info { |
|||
background-color: #3f3f3f; |
|||
} |
|||
|
|||
#contact.body_dark .contact_form .form-control { |
|||
color: #dedede; |
|||
background-color: rgba(255, 255, 255, .99); |
|||
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.1); |
|||
} |
|||
|
|||
#contact.body_dark .btn-hover-new { |
|||
background-color: #333; |
|||
} |
|||
|
|||
.section.body_dark .post-box { |
|||
box-shadow: 0 0 15px var(--greyBodyDark); |
|||
} |
|||
|
|||
.section.body_dark .post-box:hover .post-thumb::before { |
|||
opacity: 0.9; |
|||
} |
|||
|
|||
.section.body_dark .post-box .post-thumb::before { |
|||
opacity: 0; |
|||
} |
|||
|
|||
/* 导航栏背景色 */ |
|||
#mainNav.navbar-shrink.body_dark { |
|||
background-color: var(--dark-navbar); |
|||
} |
|||
|
|||
/* 导航栏菜单文本颜色 */ |
|||
#mainNav.body_dark .nav-link, #mainNav.body_dark .nav-link:hover { |
|||
color: #f2f3f5; |
|||
} |
|||
|
|||
#mainNav.navbar-shrink.body_dark .nav-link, #mainNav.navbar-shrink.body_dark .nav-link:hover { |
|||
color: #f2f3f5; |
|||
} |
|||
|
|||
/* 导航栏活跃菜单底部划线颜色 */ |
|||
body.body_dark { |
|||
background-color: var(--greyBodyDark); |
|||
} |
|||
|
|||
#mainNav.body_dark .nav-link::after { |
|||
background: #f2f3f5; |
|||
} |
|||
|
|||
#mainNav.navbar-shrink.body_dark { |
|||
box-shadow: 0.15rem 0.15rem 0.3rem rgba(0, 0, 0, 0.38), 0 0 0 rgba(0, 0, 0, 0); |
|||
} |
|||
|
|||
#mainNav.navbar-shrink.body_dark .nav-link::after { |
|||
background: #f2f3f5; |
|||
} |
|||
|
|||
.section.body_dark .btn-hover-new { |
|||
color: #ddd; |
|||
} |
|||
|
|||
.section.body_dark .btn-hover-new:hover { |
|||
color: black; |
|||
background-color: #eee; |
|||
} |
|||
|
|||
h3.body_dark, h2.body_dark { |
|||
color: #dedede; |
|||
} |
|||
|
|||
.filter-button-group button.active.body_dark { |
|||
color: var(--a-dark-hover); |
|||
background: rgba(0, 0, 0, 0); |
|||
box-shadow: inset 0.15rem 0.15rem 0.2rem var(--greyDark), inset -0.15rem -0.15rem 0.2rem var(--primary-dark-2); |
|||
} |
|||
|
|||
.filter-button-group button.body_dark { |
|||
color: #dddddd; |
|||
background: rgba(166, 166, 166, 0); |
|||
box-shadow: .1rem .1rem .2rem var(--greyDark), -.1rem -.1rem .2rem var(--primary-dark); |
|||
} |
|||
|
|||
.article-single.body_dark p, .services-inner-box.body_dark .ser-icon i, .services-inner-box.body_dark h2, .services-inner-box.body_dark p span, .section.body_dark .post-info span { |
|||
color: #d0d0d0; |
|||
} |
|||
|
|||
.services-inner-box.body_dark:active h2, .article-single.body_dark:active > h2 { |
|||
color: var(--a-dark-hover); |
|||
} |
|||
|
|||
.body_dark .img-fluid { |
|||
opacity: 0.9; |
|||
} |
|||
|
|||
.services-inner-box.body_dark:active, body.body_dark .dmtop:active, .article-single.body_dark:active { |
|||
-webkit-box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyDark), inset -0.2rem -0.2rem 0.4rem var(--primary-dark-2); |
|||
box-shadow: inset 0.2rem 0.2rem 0.4rem var(--greyDark), inset -0.2rem -0.2rem 0.4rem var(--primary-dark-2); |
|||
} |
|||
|
|||
.toggle.body_dark { |
|||
color: #e1e1e1; |
|||
} |
|||
|
|||
.toggle.body_dark:hover { |
|||
color: #f1f1f1; |
|||
} |
|||
|
|||
.copyrights.body_dark .footer-links a:hover, .copyrights.body_dark .footer a:hover, .copyrights.body_dark .footer-links a .iconfont:hover { |
|||
color: var(--a-dark-hover) !important; |
|||
} |
|||
|
|||
.copyrights.body_dark .footer-links a, .copyrights.body_dark .footer-links span { |
|||
color: #666666; |
|||
} |
|||
|
|||
.copyrights.body_dark { |
|||
box-shadow: 0 0 0 rgba(0, 0, 0, 0), -0.2rem -0.2rem 0.4rem rgba(66, 66, 66, 0.3); |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
.note-single, .api-single { |
|||
margin: 25px 0 25px; |
|||
} |
|||
|
|||
#api { |
|||
padding-top: 0; |
|||
} |
|||
|
|||
.note-menu, .api-menu { |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
.api-grid, .note-grid { |
|||
padding-left: 25px; |
|||
padding-right: 25px; |
|||
} |
|||
Loading…
Reference in new issue