253 changed files with 81778 additions and 84 deletions
@ -0,0 +1,3 @@ |
|||
*.png filter=lfs diff=lfs merge=lfs -text |
|||
*.jpg filter=lfs diff=lfs merge=lfs -text |
|||
*.svg filter=lfs diff=lfs merge=lfs -text |
|||
File diff suppressed because it is too large
@ -0,0 +1,197 @@ |
|||
@media (max-width: 1250px) { |
|||
.header_section::before { |
|||
width: 75%; |
|||
} |
|||
|
|||
.header_section { |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 22% 100%, 20% 86%, 0 84%, 0 0); |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
@media (max-width: 1120px) {} |
|||
|
|||
@media (max-width: 992px) { |
|||
.hero_area { |
|||
height: auto; |
|||
} |
|||
|
|||
.hero_area::before { |
|||
|
|||
background: linear-gradient(to bottom, transparent, #000000); |
|||
|
|||
} |
|||
|
|||
.navbar-brand.brand_mobile { |
|||
display: flex; |
|||
} |
|||
|
|||
.navbar-brand.brand_desktop { |
|||
display: none; |
|||
} |
|||
|
|||
.header_section .main_nav { |
|||
flex: 1; |
|||
} |
|||
|
|||
#navbarSupportedContent { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.header_section { |
|||
padding: 10px 0; |
|||
clip-path: none; |
|||
} |
|||
|
|||
.header_section::before, |
|||
.main_nav .top_nav { |
|||
display: none; |
|||
} |
|||
|
|||
.slider_section { |
|||
padding: 45px 0; |
|||
} |
|||
|
|||
.slider_section .slider_heading { |
|||
top: 75px; |
|||
} |
|||
|
|||
.slider_section .slider_heading h2 { |
|||
font-size: 7rem; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav { |
|||
|
|||
flex-direction: row; |
|||
top: initial; |
|||
bottom: -45px; |
|||
right: 50%; |
|||
transform: translateX(50%); |
|||
|
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev, |
|||
.class_section .owl-carousel .owl-nav .owl-next { |
|||
margin: 2px 5px; |
|||
} |
|||
|
|||
.class_section .class_container { |
|||
margin-bottom: 75px; |
|||
} |
|||
|
|||
.sub_page .class_section .owl-carousel .owl-nav { |
|||
top: initial; |
|||
bottom: 65px; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 767px) { |
|||
.slider_section #carouselExampleIndicators { |
|||
align-items: center; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators .box { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.slider_section .slider_heading { |
|||
left: 0; |
|||
opacity: .4; |
|||
} |
|||
|
|||
|
|||
|
|||
.about_section .about_container { |
|||
background-size: auto; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button { |
|||
width: 45px; |
|||
height: 45px; |
|||
|
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button img { |
|||
width: 15px; |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
.blog_section .box .detail-box { |
|||
margin-left: 25px; |
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box { |
|||
|
|||
padding-left: 0; |
|||
padding-right: 25px; |
|||
|
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box .img_date { |
|||
left: 0; |
|||
} |
|||
|
|||
.info_section .info_main-row { |
|||
flex-direction: column-reverse; |
|||
} |
|||
|
|||
.info_section .contact_section { |
|||
margin-top: 45px; |
|||
} |
|||
|
|||
.info_section .contact_section form { |
|||
padding-right: 20px; |
|||
} |
|||
|
|||
.footer_section .social_box { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.footer_section .social_box a { |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.footer_section p { |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
@media (max-width: 576px) { |
|||
.slider_section .slider_heading { |
|||
left: -70px; |
|||
} |
|||
|
|||
.about_section .about_container { |
|||
|
|||
padding: 45px 15px 45px 25px; |
|||
} |
|||
|
|||
.client_section .box { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 480px) {} |
|||
|
|||
@media (max-width: 400px) { |
|||
.slider_section .slider_heading { |
|||
left: -125px; |
|||
opacity: .2; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev, |
|||
.slider_section .carousel-control-next { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 360px) {} |
|||
|
|||
@media (min-width: 1200px) { |
|||
.container { |
|||
max-width: 1170px; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,955 @@ |
|||
body { |
|||
font-family: "Poppins", sans-serif; |
|||
color: #040000; |
|||
background-color: #000000; |
|||
} |
|||
|
|||
.layout_padding { |
|||
padding-top: 40px; |
|||
padding-bottom: 40px; |
|||
} |
|||
|
|||
.layout_padding2 { |
|||
padding: 45px 0; |
|||
} |
|||
|
|||
.layout_padding2-top { |
|||
padding-top: 45px; |
|||
} |
|||
|
|||
.layout_padding2-bottom { |
|||
padding-bottom: 45px; |
|||
} |
|||
|
|||
.layout_padding-top { |
|||
padding-top: 120px; |
|||
} |
|||
|
|||
.layout_padding-bottom { |
|||
padding-bottom: 120px; |
|||
} |
|||
|
|||
.heading_container { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: start; |
|||
-ms-flex-align: start; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.heading_container h2 { |
|||
font-weight: bold; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
text-transform: uppercase; |
|||
color: #010201; |
|||
} |
|||
|
|||
/*header section*/ |
|||
.hero_area { |
|||
height: 100vh; |
|||
|
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
position: relative; |
|||
} |
|||
|
|||
.hero_area::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(transparent), to(#000000)); |
|||
background: linear-gradient(to bottom, transparent, transparent, #000000); |
|||
} |
|||
|
|||
.sub_page .hero_area { |
|||
height: auto; |
|||
} |
|||
|
|||
.sub_page .class_section .owl-carousel .owl-nav { |
|||
top: 55%; |
|||
} |
|||
|
|||
.header_section { |
|||
background-color: #ffffff; |
|||
position: relative; |
|||
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
|||
} |
|||
|
|||
.header_section::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 62%; |
|||
height: 45px; |
|||
background: #080203; |
|||
z-index: 1; |
|||
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
|||
} |
|||
|
|||
.header_section .nav_container { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.menu_width { |
|||
width: 100%; |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
-webkit-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.header_nav { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: justify; |
|||
-ms-flex-pack: justify; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.main_nav { |
|||
position: relative; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.main_nav .top_nav ul { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
margin: 0; |
|||
} |
|||
|
|||
.main_nav .top_nav ul li { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
.main_nav .top_nav ul li a { |
|||
display: inline-block; |
|||
color: #ffffff; |
|||
margin: 10px 0 10px 35px; |
|||
} |
|||
|
|||
.main_nav .top_nav ul li a img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link { |
|||
padding: 10px 20px; |
|||
color: #212121; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
-webkit-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.custom_nav-container .nav_search-btn { |
|||
background-image: url(../images/search-icon.png); |
|||
background-size: 22px; |
|||
background-repeat: no-repeat; |
|||
background-position-y: 7px; |
|||
width: 35px; |
|||
height: 35px; |
|||
padding: 0; |
|||
border: none; |
|||
} |
|||
|
|||
.navbar-brand { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.navbar-brand img { |
|||
width: 125px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.navbar-brand.brand_mobile { |
|||
display: none; |
|||
} |
|||
|
|||
.custom_nav-container { |
|||
z-index: 99999; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler { |
|||
outline: none; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
|||
background-image: url(../images/menu.png); |
|||
background-size: 55px; |
|||
} |
|||
|
|||
/*end header section*/ |
|||
/* slider section */ |
|||
.slider_section { |
|||
height: calc(100% - 80px); |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators { |
|||
width: 100%; |
|||
} |
|||
|
|||
.slider_section .row .col-md-10 { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
} |
|||
|
|||
.slider_section .slider_heading { |
|||
-webkit-transform: rotate(270.5deg) scaleX(-1); |
|||
transform: rotate(270.5deg) scaleX(-1); |
|||
position: absolute; |
|||
left: -150px; |
|||
top: -25px; |
|||
} |
|||
|
|||
.slider_section .slider_heading h2 { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
font-size: 10rem; |
|||
text-transform: uppercase; |
|||
text-orientation: upright; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .slider_heading h2 span { |
|||
color: #000000; |
|||
} |
|||
|
|||
.slider_section .detail-box h1 { |
|||
font-size: 3rem; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .detail-box hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 65px; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .detail-box .btn-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.slider_section .detail-box .btn-box .btn-1 { |
|||
display: inline-block; |
|||
padding: 10px 35px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .detail-box .btn-box .btn-1:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: start; |
|||
-ms-flex-align: start; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators .box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: start; |
|||
-ms-flex-pack: start; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.slider_section .carousel-indicators { |
|||
position: unset; |
|||
margin: 0 70px 45px 70px; |
|||
} |
|||
|
|||
.slider_section .carousel-indicators li { |
|||
text-indent: unset; |
|||
border: none; |
|||
background-color: transparent; |
|||
color: #ffffff; |
|||
font-weight: bold; |
|||
font-size: 2rem; |
|||
opacity: 1; |
|||
display: none; |
|||
} |
|||
|
|||
.slider_section .carousel-indicators li.active { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev, |
|||
.slider_section .carousel-control-next { |
|||
position: absolute; |
|||
top: 45%; |
|||
left: initial; |
|||
right: 25px; |
|||
width: 55px; |
|||
height: 55px; |
|||
border: none; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-size: 8px; |
|||
background-position: center; |
|||
background-color: #000000; |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev:hover, |
|||
.slider_section .carousel-control-next:hover { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev { |
|||
background-image: url(../images/prev.png); |
|||
-webkit-transform: translateY(57%); |
|||
transform: translateY(57%); |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
|
|||
.slider_section .carousel-control-next { |
|||
background-image: url(../images/next.png); |
|||
-webkit-transform: translateY(-57%); |
|||
transform: translateY(-57%); |
|||
} |
|||
|
|||
.slider_section .carousel-control-next:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
|
|||
.slider_section .number_box { |
|||
width: 50px; |
|||
position: absolute; |
|||
left: 25px; |
|||
top: 50%; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
color: #000000; |
|||
-webkit-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.slider_section .number_box hr { |
|||
border: none; |
|||
width: 1px; |
|||
height: 200px; |
|||
background-color: #000000; |
|||
margin: 2rem 0; |
|||
} |
|||
|
|||
/* end slider section */ |
|||
.about_section { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.about_section .heading_container h2 { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.about_section .about_container { |
|||
padding: 45px; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 125px; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box a { |
|||
display: inline-block; |
|||
padding: 8px 35px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #ffffff; |
|||
margin: 35px auto 0 auto; |
|||
-webkit-box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
|||
box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
|||
} |
|||
|
|||
.about_section .about_container .detail-box a:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.class_section { |
|||
color: #ffffff; |
|||
position: relative; |
|||
} |
|||
|
|||
.class_section .row > div { |
|||
position: unset; |
|||
} |
|||
|
|||
.class_section .class_box-container { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-ms-flex-wrap: wrap; |
|||
flex-wrap: wrap; |
|||
margin-top: 45px; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.class_section .class_box-container .box { |
|||
position: relative; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box { |
|||
position: relative; |
|||
padding-left: 75px; |
|||
background-color: #000000; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: end; |
|||
-ms-flex-align: end; |
|||
align-items: flex-end; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 55px 0; |
|||
border-radius: 10px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button { |
|||
background-color: #292929; |
|||
border: none; |
|||
width: 55px; |
|||
height: 55px; |
|||
margin: 0 10px; |
|||
border-radius: 100%; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button img { |
|||
width: 20px; |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box h2 { |
|||
margin: 0; |
|||
text-transform: uppercase; |
|||
color: #ffffff; |
|||
font-weight: bold; |
|||
line-height: 55px; |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .btn-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .btn-box a { |
|||
display: inline-block; |
|||
padding: 10px 45px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 30px; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .btn-box a:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.class_section .owl-carousel { |
|||
position: unset; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: reverse; |
|||
-ms-flex-direction: column-reverse; |
|||
flex-direction: column-reverse; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 45px; |
|||
-webkit-transform: translateY(-100%); |
|||
transform: translateY(-100%); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev, |
|||
.class_section .owl-carousel .owl-nav .owl-next { |
|||
background-color: #000000; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 100%; |
|||
outline: none; |
|||
margin: 2px 0; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev:hover, |
|||
.class_section .owl-carousel .owl-nav .owl-next:hover { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev { |
|||
width: 75px; |
|||
height: 75px; |
|||
background-image: url(../images/prev.png); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-next { |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url(../images/next.png); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-next:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
|
|||
.blog_section { |
|||
color: #ffffff; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.blog_section .box { |
|||
margin: 45px 0; |
|||
background-color: #252525; |
|||
} |
|||
|
|||
.blog_section .box .img-box { |
|||
position: relative; |
|||
} |
|||
|
|||
.blog_section .box .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.blog_section .box .detail-box { |
|||
position: relative; |
|||
padding-top: 75px; |
|||
padding-bottom: 35px; |
|||
} |
|||
|
|||
.blog_section .box .detail-box .img_date { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 75px; |
|||
height: 75px; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
background-color: #000000; |
|||
color: #ffffff; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
-webkit-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.blog_section .box .detail-box .img_date h6 { |
|||
margin: 0; |
|||
} |
|||
|
|||
.blog_section .box .detail-box h3 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.blog_section .box .detail-box a { |
|||
display: inline-block; |
|||
padding: 8px 25px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #ffffff; |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.blog_section .box .detail-box a:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.blog_section .box.b1 .detail-box { |
|||
padding-right: 35px; |
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box { |
|||
padding-left: 35px; |
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box .img_date { |
|||
left: 35px; |
|||
} |
|||
|
|||
.client_section { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.client_section .heading_container { |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
.client_section .box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.client_section .box .img-box { |
|||
width: 125px; |
|||
border-radius: 100%; |
|||
margin-bottom: -62px; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.client_section .box .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.client_section .box .detail-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
padding: 95px 25px 45px 25px; |
|||
background-color: #050304; |
|||
} |
|||
|
|||
.client_section .box .detail-box h4 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.client_section .box .detail-box p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
.client_section .box .detail-box img { |
|||
width: 35px; |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav .owl-prev, |
|||
.client_section .owl-carousel .owl-nav .owl-next { |
|||
width: 55px; |
|||
height: 50px; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 10px; |
|||
outline: none; |
|||
margin: 0; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav .owl-prev { |
|||
background-image: url(../images/prev-arrow.png); |
|||
background-color: #000000; |
|||
-webkit-transform: translateX(10px); |
|||
transform: translateX(10px); |
|||
background-position: 15px center; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav .owl-next { |
|||
background-image: url(../images/next-arrow.png); |
|||
background-color: #ffffff; |
|||
-webkit-transform: translateX(-10px); |
|||
transform: translateX(-10px); |
|||
} |
|||
|
|||
.info_section .info_main-row { |
|||
-webkit-box-align: end; |
|||
-ms-flex-align: end; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.info_section .contact_section { |
|||
position: relative; |
|||
} |
|||
|
|||
.info_section .contact_section h2 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.info_section .contact_section form { |
|||
margin-top: 45px; |
|||
padding-right: 35px; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
.info_section .contact_section input { |
|||
width: 100%; |
|||
border: none; |
|||
height: 50px; |
|||
margin-bottom: 25px; |
|||
padding-left: 25px; |
|||
background-color: #000; |
|||
outline: none; |
|||
color: #ffffff; |
|||
border-radius: 45px; |
|||
} |
|||
|
|||
.info_section .contact_section input::-webkit-input-placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input:-ms-input-placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input::-ms-input-placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input::placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input.message-box { |
|||
height: 135px; |
|||
border-radius: 25px; |
|||
} |
|||
|
|||
.info_section .contact_section button { |
|||
border: none; |
|||
display: inline-block; |
|||
padding: 12px 55px; |
|||
background-color: #ffffff; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #000000; |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.info_section .contact_section button:hover { |
|||
background-color: #000000; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.info_section .contact_section .map_container { |
|||
height: 100%; |
|||
min-height: 325px; |
|||
} |
|||
|
|||
.info_section .contact_section .map_container .map-responsive { |
|||
height: 100%; |
|||
} |
|||
|
|||
.info_section .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* footer section*/ |
|||
.footer_section { |
|||
margin: 25px 0; |
|||
} |
|||
|
|||
.footer_section .social_box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.footer_section .social_box a { |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.footer_section .social_box a img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
} |
|||
|
|||
.footer_section p { |
|||
margin: 0; |
|||
margin-top: 25px; |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
.footer_section a { |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
/* end footer section*/ |
|||
/*# sourceMappingURL=style.css.map */ |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,889 @@ |
|||
$white: #ffffff; |
|||
$black: #000000; |
|||
$btnBlack: #151615; |
|||
$primary: #000000; |
|||
|
|||
@mixin main-font { |
|||
font-family: "Poppins", sans-serif; |
|||
} |
|||
|
|||
@mixin hero_btn($col1, $col2, $pad1, $pad2, $bRadius) { |
|||
display: inline-block; |
|||
padding: $pad1 $pad2; |
|||
background-color: $col1; |
|||
border: 1px solid transparent; |
|||
border-radius: $bRadius; |
|||
color: $col2; |
|||
|
|||
&:hover { |
|||
background-color: $col2; |
|||
color: $col1; |
|||
} |
|||
} |
|||
|
|||
@mixin upperBold { |
|||
text-transform: uppercase; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
@mixin flexCenter { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
@mixin flexColumnCenter { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
body { |
|||
@include main-font; |
|||
color: #040000; |
|||
background-color: $primary; |
|||
} |
|||
|
|||
.layout_padding { |
|||
padding-top: 120px; |
|||
padding-bottom: 120px; |
|||
} |
|||
|
|||
.layout_padding2 { |
|||
padding: 45px 0; |
|||
} |
|||
|
|||
.layout_padding2-top { |
|||
padding-top: 45px; |
|||
} |
|||
|
|||
.layout_padding2-bottom { |
|||
padding-bottom: 45px; |
|||
} |
|||
|
|||
.layout_padding-top { |
|||
padding-top: 120px; |
|||
} |
|||
|
|||
.layout_padding-bottom { |
|||
padding-bottom: 120px; |
|||
} |
|||
|
|||
.heading_container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
|
|||
h2 { |
|||
font-weight: bold; |
|||
display: flex; |
|||
align-items: center; |
|||
text-transform: uppercase; |
|||
color: #010201; |
|||
} |
|||
} |
|||
|
|||
/*header section*/ |
|||
|
|||
.hero_area { |
|||
height: 100vh; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(to bottom, transparent, transparent, $primary); |
|||
} |
|||
} |
|||
|
|||
.sub_page { |
|||
.hero_area { |
|||
height: auto; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav { |
|||
top: 55%; |
|||
} |
|||
} |
|||
|
|||
.header_section { |
|||
background-color: $white; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 62%; |
|||
height: 45px; |
|||
background: #080203; |
|||
z-index: 1; |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
|||
|
|||
} |
|||
|
|||
.nav_container { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
|||
|
|||
|
|||
} |
|||
|
|||
.menu_width { |
|||
width: 100%; |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.header_nav { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.main_nav { |
|||
position: relative; |
|||
z-index: 9; |
|||
|
|||
.top_nav { |
|||
ul { |
|||
display: flex; |
|||
margin: 0; |
|||
|
|||
li { |
|||
list-style-type: none; |
|||
|
|||
a { |
|||
display: inline-block; |
|||
color: $white; |
|||
margin: 10px 0 10px 35px; |
|||
|
|||
img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
margin-right: 15px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.custom_nav-container.navbar-expand-lg .navbar-nav { |
|||
.nav-item { |
|||
.nav-link { |
|||
padding: 10px 20px; |
|||
color: #212121; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
} |
|||
} |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.custom_nav-container .nav_search-btn { |
|||
background-image: url(../images/search-icon.png); |
|||
background-size: 22px; |
|||
background-repeat: no-repeat; |
|||
background-position-y: 7px; |
|||
width: 35px; |
|||
height: 35px; |
|||
padding: 0; |
|||
border: none; |
|||
} |
|||
|
|||
.navbar-brand { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 125px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
&.brand_mobile { |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
|
|||
.custom_nav-container { |
|||
z-index: 99999; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler { |
|||
outline: none; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
|||
background-image: url(../images/menu.png); |
|||
background-size: 55px; |
|||
} |
|||
|
|||
/*end header section*/ |
|||
|
|||
/* slider section */ |
|||
|
|||
.slider_section { |
|||
height: calc(100% - 80px); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
#carouselExampleIndicators { |
|||
width: 100%; |
|||
} |
|||
|
|||
.row { |
|||
.col-md-10 { |
|||
display: flex; |
|||
} |
|||
} |
|||
|
|||
.slider_heading { |
|||
transform: rotate(270.5deg) scaleX(-1); |
|||
position: absolute; |
|||
left: -150px; |
|||
top: -25px; |
|||
|
|||
h2 { |
|||
display: flex; |
|||
font-size: 10rem; |
|||
text-transform: uppercase; |
|||
text-orientation: upright; |
|||
font-weight: bold; |
|||
color: $white; |
|||
|
|||
span { |
|||
color: $primary; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.detail-box { |
|||
h1 { |
|||
font-size: 3rem; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
color: $white; |
|||
} |
|||
|
|||
hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 65px; |
|||
background-color: $white; |
|||
} |
|||
|
|||
.btn-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 35px; |
|||
|
|||
.btn-1 { |
|||
@include hero_btn($black, $white, 10px, 35px, 35px); |
|||
} |
|||
} |
|||
} |
|||
|
|||
#carouselExampleIndicators { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
|
|||
.box { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
} |
|||
|
|||
.carousel-indicators { |
|||
position: unset; |
|||
margin: 0 70px 45px 70px; |
|||
|
|||
|
|||
li { |
|||
text-indent: unset; |
|||
border: none; |
|||
background-color: transparent; |
|||
color: $white; |
|||
font-weight: bold; |
|||
font-size: 2rem; |
|||
opacity: 1; |
|||
display: none; |
|||
|
|||
&.active { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.carousel-control-prev, |
|||
.carousel-control-next { |
|||
position: absolute; |
|||
top: 45%; |
|||
left: initial; |
|||
right: 25px; |
|||
width: 55px; |
|||
height: 55px; |
|||
border: none; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-size: 8px; |
|||
background-position: center; |
|||
background-color: $primary; |
|||
border-radius: 100%; |
|||
|
|||
&:hover { |
|||
background-color: $white; |
|||
} |
|||
} |
|||
|
|||
.carousel-control-prev { |
|||
|
|||
background-image: url(../images/prev.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
|
|||
transform: translateY(57%); |
|||
} |
|||
|
|||
.carousel-control-next { |
|||
background-image: url(../images/next.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
|
|||
transform: translateY(-57%); |
|||
} |
|||
|
|||
|
|||
|
|||
.number_box { |
|||
width: 50px; |
|||
position: absolute; |
|||
left: 25px; |
|||
top: 50%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
color: $primary; |
|||
transform: translateY(-50%); |
|||
|
|||
hr { |
|||
border: none; |
|||
width: 1px; |
|||
height: 200px; |
|||
background-color: $primary; |
|||
margin: 2rem 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* end slider section */ |
|||
|
|||
// about section |
|||
|
|||
.about_section { |
|||
color: $white; |
|||
|
|||
.heading_container { |
|||
h2 { |
|||
color: $white; |
|||
} |
|||
} |
|||
|
|||
.about_container { |
|||
padding: 45px; |
|||
|
|||
background-size: cover; |
|||
|
|||
.detail-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 125px; |
|||
background-color: $white; |
|||
} |
|||
|
|||
a { |
|||
@include hero_btn($black, $white, 8px, 35px, 35px); |
|||
margin: 35px auto 0 auto; |
|||
box-shadow: 0 0 35px 0 rgba($color: #000000, $alpha: .7); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// end about section |
|||
|
|||
// class section |
|||
|
|||
.class_section { |
|||
color: $white; |
|||
position: relative; |
|||
|
|||
.row>div { |
|||
position: unset; |
|||
} |
|||
|
|||
.class_box-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 45px; |
|||
justify-content: center; |
|||
|
|||
|
|||
.box { |
|||
position: relative; |
|||
|
|||
.img-box { |
|||
position: relative; |
|||
padding-left: 75px; |
|||
background-color: $black; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.detail-box { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 55px 0; |
|||
border-radius: 10px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
|
|||
button { |
|||
background-color: #292929; |
|||
border: none; |
|||
width: 55px; |
|||
height: 55px; |
|||
margin: 0 10px; |
|||
border-radius: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 20px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
|
|||
h2 { |
|||
margin: 0; |
|||
text-transform: uppercase; |
|||
color: $white; |
|||
font-weight: bold; |
|||
line-height: 55px; |
|||
margin-left: 15px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-box { |
|||
display: flex; |
|||
margin-top: 30px; |
|||
|
|||
a { |
|||
@include hero_btn($black, $white, 10px, 45px, 30px); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.owl-carousel { |
|||
position: unset; |
|||
|
|||
.owl-nav { |
|||
display: flex; |
|||
flex-direction: column-reverse; |
|||
align-items: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 45px; |
|||
transform: translateY(-100%); |
|||
|
|||
.owl-prev, |
|||
.owl-next { |
|||
background-color: $black; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 100%; |
|||
outline: none; |
|||
margin: 2px 0; |
|||
|
|||
&:hover { |
|||
background-color: $white; |
|||
} |
|||
} |
|||
|
|||
.owl-prev { |
|||
width: 75px; |
|||
height: 75px; |
|||
background-image: url(../images/prev.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
} |
|||
|
|||
.owl-next { |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url(../images/next.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// end class section |
|||
|
|||
|
|||
// blog section |
|||
|
|||
.blog_section { |
|||
color: $white; |
|||
overflow-x: hidden; |
|||
|
|||
.box { |
|||
margin: 45px 0; |
|||
background-color: #252525; |
|||
|
|||
.img-box { |
|||
position: relative; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.detail-box { |
|||
position: relative; |
|||
padding-top: 75px; |
|||
padding-bottom: 35px; |
|||
|
|||
.img_date { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 75px; |
|||
height: 75px; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
background-color: $primary; |
|||
color: $white; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
transform: translateY(-50%); |
|||
|
|||
h6 { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
h3 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
a { |
|||
@include hero_btn($black, $white, 8px, 25px, 35px); |
|||
margin-top: 35px; |
|||
} |
|||
} |
|||
|
|||
&.b1 { |
|||
.detail-box { |
|||
padding-right: 35px; |
|||
} |
|||
} |
|||
|
|||
&.b2 { |
|||
.detail-box { |
|||
padding-left: 35px; |
|||
|
|||
.img_date { |
|||
left: 35px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
// end blog section |
|||
|
|||
|
|||
|
|||
// client section |
|||
|
|||
.client_section { |
|||
|
|||
color: $white; |
|||
|
|||
.heading_container { |
|||
align-items: center; |
|||
text-align: center; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
.box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin: 0 10px; |
|||
|
|||
.img-box { |
|||
width: 125px; |
|||
border-radius: 100%; |
|||
margin-bottom: -62px; |
|||
position: relative; |
|||
z-index: 2; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.detail-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 95px 25px 45px 25px; |
|||
background-color: #050304; |
|||
|
|||
h4 { |
|||
|
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
|
|||
p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
img { |
|||
width: 35px; |
|||
margin-top: 25px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.owl-carousel .owl-nav { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
|
|||
.owl-prev, |
|||
.owl-next { |
|||
// position: absolute; |
|||
width: 55px; |
|||
height: 50px; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 10px; |
|||
outline: none; |
|||
margin: 0; |
|||
} |
|||
|
|||
.owl-prev { |
|||
background-image: url(../images/prev-arrow.png); |
|||
background-color: $black; |
|||
transform: translateX(10px); |
|||
background-position: 15px center; |
|||
} |
|||
|
|||
.owl-next { |
|||
background-image: url(../images/next-arrow.png); |
|||
background-color: $white; |
|||
transform: translateX(-10px); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// end client section |
|||
|
|||
// info section |
|||
|
|||
.info_section { |
|||
.info_main-row { |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
// contact section |
|||
.contact_section { |
|||
position: relative; |
|||
|
|||
h2 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
form { |
|||
margin-top: 45px; |
|||
padding-right: 35px; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
input { |
|||
width: 100%; |
|||
border: none; |
|||
height: 50px; |
|||
margin-bottom: 25px; |
|||
padding-left: 25px; |
|||
background-color: #000; |
|||
outline: none; |
|||
color: $white; |
|||
border-radius: 45px; |
|||
|
|||
&::placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
&.message-box { |
|||
height: 135px; |
|||
border-radius: 25px; |
|||
} |
|||
} |
|||
|
|||
button { |
|||
border: none; |
|||
@include hero_btn($white, $black, 12px, 55px, 35px); |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.map_container { |
|||
height: 100%; |
|||
min-height: 325px; |
|||
|
|||
.map-responsive { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// end contact section |
|||
|
|||
|
|||
.img-box { |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
// end info section |
|||
|
|||
|
|||
|
|||
/* footer section*/ |
|||
|
|||
.footer_section { |
|||
margin: 25px 0; |
|||
|
|||
.social_box { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
a { |
|||
margin-right: 15px; |
|||
|
|||
img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.footer_section p { |
|||
margin: 0; |
|||
margin-top: 25px; |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
.footer_section a { |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
/* end footer section*/ |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -0,0 +1,291 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<!-- Basic --> |
|||
<meta charset="utf-8" /> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|||
<!-- Mobile Metas --> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
|||
<!-- Site Metas --> |
|||
<meta name="keywords" content="" /> |
|||
<meta name="description" content="" /> |
|||
<meta name="author" content="" /> |
|||
|
|||
<title>Oxer</title> |
|||
|
|||
<!-- slider stylesheet --> |
|||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
|||
|
|||
<!-- bootstrap core css --> |
|||
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> |
|||
|
|||
<!-- fonts style --> |
|||
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
|||
<!-- Custom styles for this template --> |
|||
<link href="css/style.css" rel="stylesheet" /> |
|||
<!-- responsive style --> |
|||
<link href="css/responsive.css" rel="stylesheet" /> |
|||
</head> |
|||
|
|||
<body class="sub_page"> |
|||
<div class="hero_area"> |
|||
<!-- header section strats --> |
|||
<header class="header_section"> |
|||
<div class="container"> |
|||
<div class="header_nav"> |
|||
<a class="navbar-brand brand_desktop" href="index.html"> |
|||
<img src="images/logo.png" alt="" /> |
|||
</a> |
|||
<div class="main_nav"> |
|||
<div class="top_nav"> |
|||
<ul class=" "> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/telephone.png" alt="" /> |
|||
<span> +01 1234567890</span> |
|||
</a> |
|||
</li> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/mail.png" alt="" /> |
|||
<span>demo@gmail.com</span> |
|||
</a> |
|||
</li> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/location.png" alt="" /> |
|||
<span>Den mark Loram ipusum</span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="bottom_nav"> |
|||
<nav class="navbar navbar-expand-lg custom_nav-container"> |
|||
<a class="navbar-brand brand_mobile" href="index.html"> |
|||
<img src="images/logo.png" alt="" /> |
|||
</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|||
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
|||
<ul class="navbar-nav "> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="about.html"> About </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="class.html"> Classes </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="blog.html">Blog</a> |
|||
</li> |
|||
</ul> |
|||
<form class="form-inline"> |
|||
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
<!-- end header section --> |
|||
</div> |
|||
|
|||
<!-- about section --> |
|||
|
|||
<section class="about_section layout_padding"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 ml-auto pr-0"> |
|||
<div class="about_container"> |
|||
<div class="row"> |
|||
<div class="col-lg-3 col-md-5"> |
|||
<div class="detail-box"> |
|||
<div class="heading_container"> |
|||
<h2> |
|||
About Class |
|||
</h2> |
|||
</div> |
|||
<p> |
|||
iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquipnisi ut aliquipiusmod tempor incididunt ut labore et |
|||
</p> |
|||
<hr /> |
|||
<a href=""> |
|||
Read More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<!-- end about section --> |
|||
|
|||
<!-- info section --> |
|||
<div class="info_section"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 ml-auto"> |
|||
<div class="row info_main-row"> |
|||
<div class="col-md-6 pr-0"> |
|||
|
|||
<!-- contact section --> |
|||
|
|||
<section class="contact_section"> |
|||
<h2> |
|||
Request A Call Back |
|||
</h2> |
|||
<form action=""> |
|||
<div> |
|||
<input type="text" placeholder="Name" /> |
|||
</div> |
|||
<div> |
|||
<input type="text" placeholder="Phone Number" /> |
|||
</div> |
|||
<div> |
|||
<input type="email" placeholder="Email" /> |
|||
</div> |
|||
<div> |
|||
<input type="text" class="message-box" placeholder="Message" /> |
|||
</div> |
|||
<div class="d-flex "> |
|||
<button> |
|||
SEND |
|||
</button> |
|||
</div> |
|||
</form> |
|||
<div class="map_container"> |
|||
<div class="map"> |
|||
<div id="googleMap" style="width:100%;height:300px;"></div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- end contact section --> |
|||
|
|||
|
|||
<!-- footer section --> |
|||
<section class=" footer_section "> |
|||
<div class="social_box"> |
|||
<a href="#"> |
|||
<img src="images/facebook.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/twitter.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/linkedin.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/instagram.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/youtube.png" alt=""> |
|||
</a> |
|||
</div> |
|||
<p> |
|||
© 2020 All Rights Reserved. Design by |
|||
<a href="https://html.design/">Free Html Templates</a> |
|||
</p> |
|||
</section> |
|||
<!-- footer section --> |
|||
|
|||
</div> |
|||
<div class="col-md-6 px-0"> |
|||
<div class="img-box"> |
|||
<img src="images/footer-img.jpg" alt=""> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- end info section --> |
|||
|
|||
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> |
|||
<script type="text/javascript" src="js/bootstrap.js"></script> |
|||
|
|||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"> |
|||
</script> |
|||
|
|||
<script> |
|||
function openNav() { |
|||
document.getElementById("myNav").classList.toggle("menu_width"); |
|||
document.querySelector(".custom_menu-btn").classList.toggle("menu_btn-style"); |
|||
} |
|||
</script> |
|||
|
|||
<!-- owl carousel script --> |
|||
<script type="text/javascript"> |
|||
$(".owl-carousel").owlCarousel({ |
|||
loop: true, |
|||
margin: 10, |
|||
nav: true, |
|||
navText: [], |
|||
autoplay: true, |
|||
autoplayHoverPause: true, |
|||
responsive: { |
|||
0: { |
|||
items: 1 |
|||
}, |
|||
600: { |
|||
items: 2 |
|||
}, |
|||
1000: { |
|||
items: 2 |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
$(".owl_carousel1").owlCarousel({ |
|||
loop: true, |
|||
margin: 25, |
|||
nav: true, |
|||
navText: [], |
|||
autoplay: true, |
|||
autoplayHoverPause: true, |
|||
responsive: { |
|||
0: { |
|||
items: 1 |
|||
}, |
|||
600: { |
|||
items: 2 |
|||
}, |
|||
1000: { |
|||
items: 2 |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
<!-- end owl carousel script --> |
|||
|
|||
<script> |
|||
/** google_map js **/ |
|||
|
|||
function myMap() { |
|||
var mapProp = { |
|||
center: new google.maps.LatLng(40.712775, -74.005973), |
|||
zoom: 18, |
|||
}; |
|||
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); |
|||
} |
|||
</script> |
|||
<!-- Google Map --> |
|||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script> |
|||
<!-- End Google Map --> |
|||
|
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,339 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<!-- Basic --> |
|||
<meta charset="utf-8" /> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|||
<!-- Mobile Metas --> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
|||
<!-- Site Metas --> |
|||
<meta name="keywords" content="" /> |
|||
<meta name="description" content="" /> |
|||
<meta name="author" content="" /> |
|||
|
|||
<title>Oxer</title> |
|||
|
|||
<!-- slider stylesheet --> |
|||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
|||
|
|||
<!-- bootstrap core css --> |
|||
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> |
|||
|
|||
<!-- fonts style --> |
|||
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
|||
<!-- Custom styles for this template --> |
|||
<link href="css/style.css" rel="stylesheet" /> |
|||
<!-- responsive style --> |
|||
<link href="css/responsive.css" rel="stylesheet" /> |
|||
</head> |
|||
|
|||
<body class="sub_page"> |
|||
<div class="hero_area"> |
|||
<!-- header section strats --> |
|||
<header class="header_section"> |
|||
<div class="container"> |
|||
<div class="header_nav"> |
|||
<a class="navbar-brand brand_desktop" href="index.html"> |
|||
<img src="images/logo.png" alt="" /> |
|||
</a> |
|||
<div class="main_nav"> |
|||
<div class="top_nav"> |
|||
<ul class=" "> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/telephone.png" alt="" /> |
|||
<span> +01 1234567890</span> |
|||
</a> |
|||
</li> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/mail.png" alt="" /> |
|||
<span>demo@gmail.com</span> |
|||
</a> |
|||
</li> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/location.png" alt="" /> |
|||
<span>Den mark Loram ipusum</span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="bottom_nav"> |
|||
<nav class="navbar navbar-expand-lg custom_nav-container"> |
|||
<a class="navbar-brand brand_mobile" href="index.html"> |
|||
<img src="images/logo.png" alt="" /> |
|||
</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|||
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
|||
<ul class="navbar-nav "> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="about.html"> About </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="class.html"> Classes </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="blog.html">Blog</a> |
|||
</li> |
|||
</ul> |
|||
<form class="form-inline"> |
|||
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
<!-- end header section --> |
|||
</div> |
|||
|
|||
|
|||
<!-- blog section --> |
|||
|
|||
<section class="blog_section layout_padding"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 ml-auto"> |
|||
<div class="heading_container"> |
|||
<h2> |
|||
Latest Blog |
|||
</h2> |
|||
<p> |
|||
iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-md-6 pl-0"> |
|||
<div class="box b1"> |
|||
<div class="img-box"> |
|||
<img src="images/b1.jpg" alt=""> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-lg-8 col-md-10 ml-auto"> |
|||
<div class="detail-box"> |
|||
<div class="img_date"> |
|||
<h6> |
|||
17 <br> |
|||
Feb |
|||
</h6> |
|||
</div> |
|||
<h3> |
|||
Boxer Joniya Daro |
|||
</h3> |
|||
<p> |
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
|||
</p> |
|||
<a href=""> |
|||
Read More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="col-md-6 pr-0"> |
|||
<div class="box b2"> |
|||
<div class="img-box"> |
|||
<img src="images/b2.jpg" alt=""> |
|||
</div> |
|||
<div class="row"> |
|||
<div class="col-lg-8 col-md-10 mr-auto"> |
|||
<div class="detail-box"> |
|||
<div class="img_date"> |
|||
<h6> |
|||
17 <br> |
|||
Jun |
|||
</h6> |
|||
</div> |
|||
<h3> |
|||
Boxer Joniya Daro |
|||
</h3> |
|||
<p> |
|||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea |
|||
</p> |
|||
<a href=""> |
|||
Read More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- end blog section --> |
|||
|
|||
<!-- info section --> |
|||
<div class="info_section"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 ml-auto"> |
|||
<div class="row info_main-row"> |
|||
<div class="col-md-6 pr-0"> |
|||
|
|||
<!-- contact section --> |
|||
|
|||
<section class="contact_section"> |
|||
<h2> |
|||
Request A Call Back |
|||
</h2> |
|||
<form action=""> |
|||
<div> |
|||
<input type="text" placeholder="Name" /> |
|||
</div> |
|||
<div> |
|||
<input type="text" placeholder="Phone Number" /> |
|||
</div> |
|||
<div> |
|||
<input type="email" placeholder="Email" /> |
|||
</div> |
|||
<div> |
|||
<input type="text" class="message-box" placeholder="Message" /> |
|||
</div> |
|||
<div class="d-flex "> |
|||
<button> |
|||
SEND |
|||
</button> |
|||
</div> |
|||
</form> |
|||
<div class="map_container"> |
|||
<div class="map"> |
|||
<div id="googleMap" style="width:100%;height:300px;"></div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- end contact section --> |
|||
|
|||
|
|||
<!-- footer section --> |
|||
<section class=" footer_section "> |
|||
<div class="social_box"> |
|||
<a href="#"> |
|||
<img src="images/facebook.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/twitter.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/linkedin.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/instagram.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/youtube.png" alt=""> |
|||
</a> |
|||
</div> |
|||
<p> |
|||
© 2020 All Rights Reserved. Design by |
|||
<a href="https://html.design/">Free Html Templates</a> |
|||
</p> |
|||
</section> |
|||
<!-- footer section --> |
|||
|
|||
</div> |
|||
<div class="col-md-6 px-0"> |
|||
<div class="img-box"> |
|||
<img src="images/footer-img.jpg" alt=""> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- end info section --> |
|||
|
|||
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> |
|||
<script type="text/javascript" src="js/bootstrap.js"></script> |
|||
|
|||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"> |
|||
</script> |
|||
|
|||
<script> |
|||
function openNav() { |
|||
document.getElementById("myNav").classList.toggle("menu_width"); |
|||
document.querySelector(".custom_menu-btn").classList.toggle("menu_btn-style"); |
|||
} |
|||
</script> |
|||
|
|||
<!-- owl carousel script --> |
|||
<script type="text/javascript"> |
|||
$(".owl-carousel").owlCarousel({ |
|||
loop: true, |
|||
margin: 10, |
|||
nav: true, |
|||
navText: [], |
|||
autoplay: true, |
|||
autoplayHoverPause: true, |
|||
responsive: { |
|||
0: { |
|||
items: 1 |
|||
}, |
|||
600: { |
|||
items: 2 |
|||
}, |
|||
1000: { |
|||
items: 2 |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
$(".owl_carousel1").owlCarousel({ |
|||
loop: true, |
|||
margin: 25, |
|||
nav: true, |
|||
navText: [], |
|||
autoplay: true, |
|||
autoplayHoverPause: true, |
|||
responsive: { |
|||
0: { |
|||
items: 1 |
|||
}, |
|||
600: { |
|||
items: 2 |
|||
}, |
|||
1000: { |
|||
items: 2 |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
<!-- end owl carousel script --> |
|||
|
|||
<script> |
|||
/** google_map js **/ |
|||
|
|||
function myMap() { |
|||
var mapProp = { |
|||
center: new google.maps.LatLng(40.712775, -74.005973), |
|||
zoom: 18, |
|||
}; |
|||
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); |
|||
} |
|||
</script> |
|||
<!-- Google Map --> |
|||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script> |
|||
<!-- End Google Map --> |
|||
|
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,373 @@ |
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<!-- Basic --> |
|||
<meta charset="utf-8" /> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|||
<!-- Mobile Metas --> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
|||
<!-- Site Metas --> |
|||
<meta name="keywords" content="" /> |
|||
<meta name="description" content="" /> |
|||
<meta name="author" content="" /> |
|||
|
|||
<title>Oxer</title> |
|||
|
|||
<!-- slider stylesheet --> |
|||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
|||
|
|||
<!-- bootstrap core css --> |
|||
<link rel="stylesheet" type="text/css" href="css/bootstrap.css" /> |
|||
|
|||
<!-- fonts style --> |
|||
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
|||
<!-- Custom styles for this template --> |
|||
<link href="css/style.css" rel="stylesheet" /> |
|||
<!-- responsive style --> |
|||
<link href="css/responsive.css" rel="stylesheet" /> |
|||
</head> |
|||
|
|||
<body class="sub_page"> |
|||
<div class="hero_area"> |
|||
<!-- header section strats --> |
|||
<header class="header_section"> |
|||
<div class="container"> |
|||
<div class="header_nav"> |
|||
<a class="navbar-brand brand_desktop" href="index.html"> |
|||
<img src="images/logo.png" alt="" /> |
|||
</a> |
|||
<div class="main_nav"> |
|||
<div class="top_nav"> |
|||
<ul class=" "> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/telephone.png" alt="" /> |
|||
<span> +01 1234567890</span> |
|||
</a> |
|||
</li> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/mail.png" alt="" /> |
|||
<span>demo@gmail.com</span> |
|||
</a> |
|||
</li> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="images/location.png" alt="" /> |
|||
<span>Den mark Loram ipusum</span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="bottom_nav"> |
|||
<nav class="navbar navbar-expand-lg custom_nav-container"> |
|||
<a class="navbar-brand brand_mobile" href="index.html"> |
|||
<img src="images/logo.png" alt="" /> |
|||
</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|||
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
|||
<ul class="navbar-nav "> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="about.html"> About </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="class.html"> Classes </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="blog.html">Blog</a> |
|||
</li> |
|||
</ul> |
|||
<form class="form-inline"> |
|||
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
<!-- end header section --> |
|||
</div> |
|||
|
|||
|
|||
<!-- class section --> |
|||
|
|||
<section class="class_section layout_padding"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 col-lg-8 mx-auto"> |
|||
<div class="class_container"> |
|||
<div class="row"> |
|||
<div class="col-lg-9 col-md-10"> |
|||
<div class="heading_container"> |
|||
<h2> |
|||
Our Classes Videos |
|||
</h2> |
|||
<p> |
|||
iusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis n |
|||
ostrud exercitation ullamco laboris iusmod tempor incididunt ut labore et dolore |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="class_box-container"> |
|||
<div class="owl-carousel owl_carousel1"> |
|||
<div class="item"> |
|||
<div class="box"> |
|||
<div class="img-box"> |
|||
<img src="images/c1.jpg" alt=""> |
|||
<div class="detail-box"> |
|||
<button> |
|||
<img src="images/play-icon.png" alt=""> |
|||
</button> |
|||
<h2> |
|||
Boxing |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
<div class="btn-box"> |
|||
<a href=""> |
|||
See More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="box"> |
|||
<div class="img-box"> |
|||
<img src="images/c2.jpg" alt=""> |
|||
<div class="detail-box"> |
|||
<button> |
|||
<img src="images/play-icon.png" alt=""> |
|||
</button> |
|||
<h2> |
|||
Boxing |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
<div class="btn-box"> |
|||
<a href=""> |
|||
See More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="box"> |
|||
<div class="img-box"> |
|||
<img src="images/c1.jpg" alt=""> |
|||
<div class="detail-box"> |
|||
<button> |
|||
<img src="images/play-icon.png" alt=""> |
|||
</button> |
|||
<h2> |
|||
Boxing |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
<div class="btn-box"> |
|||
<a href=""> |
|||
See More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<div class="item"> |
|||
<div class="box"> |
|||
<div class="img-box"> |
|||
<img src="images/c2.jpg" alt=""> |
|||
<div class="detail-box"> |
|||
<button> |
|||
<img src="images/play-icon.png" alt=""> |
|||
</button> |
|||
<h2> |
|||
Boxing |
|||
</h2> |
|||
</div> |
|||
</div> |
|||
<div class="btn-box"> |
|||
<a href=""> |
|||
See More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- end class section --> |
|||
|
|||
|
|||
<!-- info section --> |
|||
<div class="info_section"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 ml-auto"> |
|||
<div class="row info_main-row"> |
|||
<div class="col-md-6 pr-0"> |
|||
|
|||
<!-- contact section --> |
|||
|
|||
<section class="contact_section"> |
|||
<h2> |
|||
Request A Call Back |
|||
</h2> |
|||
<form action=""> |
|||
<div> |
|||
<input type="text" placeholder="Name" /> |
|||
</div> |
|||
<div> |
|||
<input type="text" placeholder="Phone Number" /> |
|||
</div> |
|||
<div> |
|||
<input type="email" placeholder="Email" /> |
|||
</div> |
|||
<div> |
|||
<input type="text" class="message-box" placeholder="Message" /> |
|||
</div> |
|||
<div class="d-flex "> |
|||
<button> |
|||
SEND |
|||
</button> |
|||
</div> |
|||
</form> |
|||
<div class="map_container"> |
|||
<div class="map"> |
|||
<div id="googleMap" style="width:100%;height:300px;"></div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
|
|||
<!-- end contact section --> |
|||
|
|||
|
|||
<!-- footer section --> |
|||
<section class=" footer_section "> |
|||
<div class="social_box"> |
|||
<a href="#"> |
|||
<img src="images/facebook.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/twitter.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/linkedin.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/instagram.png" alt=""> |
|||
</a> |
|||
<a href="#"> |
|||
<img src="images/youtube.png" alt=""> |
|||
</a> |
|||
</div> |
|||
<p> |
|||
© 2020 All Rights Reserved. Design by |
|||
<a href="https://html.design/">Free Html Templates</a> |
|||
</p> |
|||
</section> |
|||
<!-- footer section --> |
|||
|
|||
</div> |
|||
<div class="col-md-6 px-0"> |
|||
<div class="img-box"> |
|||
<img src="images/footer-img.jpg" alt=""> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
<!-- end info section --> |
|||
|
|||
<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script> |
|||
<script type="text/javascript" src="js/bootstrap.js"></script> |
|||
|
|||
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js"> |
|||
</script> |
|||
|
|||
<script> |
|||
function openNav() { |
|||
document.getElementById("myNav").classList.toggle("menu_width"); |
|||
document.querySelector(".custom_menu-btn").classList.toggle("menu_btn-style"); |
|||
} |
|||
</script> |
|||
|
|||
<!-- owl carousel script --> |
|||
<script type="text/javascript"> |
|||
$(".owl-carousel").owlCarousel({ |
|||
loop: true, |
|||
margin: 10, |
|||
nav: true, |
|||
navText: [], |
|||
autoplay: true, |
|||
autoplayHoverPause: true, |
|||
responsive: { |
|||
0: { |
|||
items: 1 |
|||
}, |
|||
600: { |
|||
items: 2 |
|||
}, |
|||
1000: { |
|||
items: 2 |
|||
} |
|||
} |
|||
}); |
|||
|
|||
|
|||
$(".owl_carousel1").owlCarousel({ |
|||
loop: true, |
|||
margin: 25, |
|||
nav: true, |
|||
navText: [], |
|||
autoplay: true, |
|||
autoplayHoverPause: true, |
|||
responsive: { |
|||
0: { |
|||
items: 1 |
|||
}, |
|||
600: { |
|||
items: 2 |
|||
}, |
|||
1000: { |
|||
items: 2 |
|||
} |
|||
} |
|||
}); |
|||
</script> |
|||
<!-- end owl carousel script --> |
|||
|
|||
<script> |
|||
/** google_map js **/ |
|||
|
|||
function myMap() { |
|||
var mapProp = { |
|||
center: new google.maps.LatLng(40.712775, -74.005973), |
|||
zoom: 18, |
|||
}; |
|||
var map = new google.maps.Map(document.getElementById("googleMap"), mapProp); |
|||
} |
|||
</script> |
|||
<!-- Google Map --> |
|||
<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyCh39n5U-4IoWpsVGUHWdqB6puEkhRLdmI&callback=myMap"></script> |
|||
<!-- End Google Map --> |
|||
|
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
File diff suppressed because it is too large
@ -0,0 +1,197 @@ |
|||
@media (max-width: 1250px) { |
|||
.header_section::before { |
|||
width: 75%; |
|||
} |
|||
|
|||
.header_section { |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 22% 100%, 20% 86%, 0 84%, 0 0); |
|||
|
|||
} |
|||
|
|||
} |
|||
|
|||
@media (max-width: 1120px) {} |
|||
|
|||
@media (max-width: 992px) { |
|||
.hero_area { |
|||
height: auto; |
|||
} |
|||
|
|||
.hero_area::before { |
|||
|
|||
background: linear-gradient(to bottom, transparent, #000000); |
|||
|
|||
} |
|||
|
|||
.navbar-brand.brand_mobile { |
|||
display: flex; |
|||
} |
|||
|
|||
.navbar-brand.brand_desktop { |
|||
display: none; |
|||
} |
|||
|
|||
.header_section .main_nav { |
|||
flex: 1; |
|||
} |
|||
|
|||
#navbarSupportedContent { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.header_section { |
|||
padding: 10px 0; |
|||
clip-path: none; |
|||
} |
|||
|
|||
.header_section::before, |
|||
.main_nav .top_nav { |
|||
display: none; |
|||
} |
|||
|
|||
.slider_section { |
|||
padding: 45px 0; |
|||
} |
|||
|
|||
.slider_section .slider_heading { |
|||
top: 75px; |
|||
} |
|||
|
|||
.slider_section .slider_heading h2 { |
|||
font-size: 7rem; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav { |
|||
|
|||
flex-direction: row; |
|||
top: initial; |
|||
bottom: -45px; |
|||
right: 50%; |
|||
transform: translateX(50%); |
|||
|
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev, |
|||
.class_section .owl-carousel .owl-nav .owl-next { |
|||
margin: 2px 5px; |
|||
} |
|||
|
|||
.class_section .class_container { |
|||
margin-bottom: 75px; |
|||
} |
|||
|
|||
.sub_page .class_section .owl-carousel .owl-nav { |
|||
top: initial; |
|||
bottom: 65px; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 767px) { |
|||
.slider_section #carouselExampleIndicators { |
|||
align-items: center; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators .box { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.slider_section .slider_heading { |
|||
left: 0; |
|||
opacity: .4; |
|||
} |
|||
|
|||
|
|||
|
|||
.about_section .about_container { |
|||
background-size: auto; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button { |
|||
width: 45px; |
|||
height: 45px; |
|||
|
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button img { |
|||
width: 15px; |
|||
margin-left: 3px; |
|||
} |
|||
|
|||
.blog_section .box .detail-box { |
|||
margin-left: 25px; |
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box { |
|||
|
|||
padding-left: 0; |
|||
padding-right: 25px; |
|||
|
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box .img_date { |
|||
left: 0; |
|||
} |
|||
|
|||
.info_section .info_main-row { |
|||
flex-direction: column-reverse; |
|||
} |
|||
|
|||
.info_section .contact_section { |
|||
margin-top: 45px; |
|||
} |
|||
|
|||
.info_section .contact_section form { |
|||
padding-right: 20px; |
|||
} |
|||
|
|||
.footer_section .social_box { |
|||
justify-content: center; |
|||
} |
|||
|
|||
.footer_section .social_box a { |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.footer_section p { |
|||
text-align: center; |
|||
} |
|||
|
|||
} |
|||
|
|||
@media (max-width: 576px) { |
|||
.slider_section .slider_heading { |
|||
left: -70px; |
|||
} |
|||
|
|||
.about_section .about_container { |
|||
|
|||
padding: 45px 15px 45px 25px; |
|||
} |
|||
|
|||
.client_section .box { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 480px) {} |
|||
|
|||
@media (max-width: 400px) { |
|||
.slider_section .slider_heading { |
|||
left: -125px; |
|||
opacity: .2; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev, |
|||
.slider_section .carousel-control-next { |
|||
display: none; |
|||
} |
|||
} |
|||
|
|||
@media (max-width: 360px) {} |
|||
|
|||
@media (min-width: 1200px) { |
|||
.container { |
|||
max-width: 1170px; |
|||
} |
|||
|
|||
} |
|||
@ -0,0 +1,954 @@ |
|||
body { |
|||
font-family: "Poppins", sans-serif; |
|||
color: #040000; |
|||
background-color: #000000; |
|||
} |
|||
|
|||
.layout_padding { |
|||
padding-top: 120px; |
|||
padding-bottom: 120px; |
|||
} |
|||
|
|||
.layout_padding2 { |
|||
padding: 45px 0; |
|||
} |
|||
|
|||
.layout_padding2-top { |
|||
padding-top: 45px; |
|||
} |
|||
|
|||
.layout_padding2-bottom { |
|||
padding-bottom: 45px; |
|||
} |
|||
|
|||
.layout_padding-top { |
|||
padding-top: 120px; |
|||
} |
|||
|
|||
.layout_padding-bottom { |
|||
padding-bottom: 120px; |
|||
} |
|||
|
|||
.heading_container { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: start; |
|||
-ms-flex-align: start; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.heading_container h2 { |
|||
font-weight: bold; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
text-transform: uppercase; |
|||
color: #010201; |
|||
} |
|||
|
|||
/*header section*/ |
|||
.hero_area { |
|||
height: 100vh; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
position: relative; |
|||
} |
|||
|
|||
.hero_area::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(transparent), to(#000000)); |
|||
background: linear-gradient(to bottom, transparent, transparent, #000000); |
|||
} |
|||
|
|||
.sub_page .hero_area { |
|||
height: auto; |
|||
} |
|||
|
|||
.sub_page .class_section .owl-carousel .owl-nav { |
|||
top: 55%; |
|||
} |
|||
|
|||
.header_section { |
|||
background-color: #ffffff; |
|||
position: relative; |
|||
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
|||
} |
|||
|
|||
.header_section::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 62%; |
|||
height: 45px; |
|||
background: #080203; |
|||
z-index: 1; |
|||
-webkit-clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
|||
} |
|||
|
|||
.header_section .nav_container { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
.menu_width { |
|||
width: 100%; |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
-webkit-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.header_nav { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: justify; |
|||
-ms-flex-pack: justify; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.main_nav { |
|||
position: relative; |
|||
z-index: 9; |
|||
} |
|||
|
|||
.main_nav .top_nav ul { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
margin: 0; |
|||
} |
|||
|
|||
.main_nav .top_nav ul li { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
.main_nav .top_nav ul li a { |
|||
display: inline-block; |
|||
color: #ffffff; |
|||
margin: 10px 0 10px 35px; |
|||
} |
|||
|
|||
.main_nav .top_nav ul li a img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.custom_nav-container.navbar-expand-lg .navbar-nav .nav-item .nav-link { |
|||
padding: 10px 20px; |
|||
color: #212121; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
-webkit-box-shadow: none; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.custom_nav-container .nav_search-btn { |
|||
background-image: url(../images/search-icon.png); |
|||
background-size: 22px; |
|||
background-repeat: no-repeat; |
|||
background-position-y: 7px; |
|||
width: 35px; |
|||
height: 35px; |
|||
padding: 0; |
|||
border: none; |
|||
} |
|||
|
|||
.navbar-brand { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.navbar-brand img { |
|||
width: 125px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
.navbar-brand.brand_mobile { |
|||
display: none; |
|||
} |
|||
|
|||
.custom_nav-container { |
|||
z-index: 99999; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler { |
|||
outline: none; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
|||
background-image: url(../images/menu.png); |
|||
background-size: 55px; |
|||
} |
|||
|
|||
/*end header section*/ |
|||
/* slider section */ |
|||
.slider_section { |
|||
height: calc(100% - 80px); |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators { |
|||
width: 100%; |
|||
} |
|||
|
|||
.slider_section .row .col-md-10 { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
} |
|||
|
|||
.slider_section .slider_heading { |
|||
-webkit-transform: rotate(270.5deg) scaleX(-1); |
|||
transform: rotate(270.5deg) scaleX(-1); |
|||
position: absolute; |
|||
left: -150px; |
|||
top: -25px; |
|||
} |
|||
|
|||
.slider_section .slider_heading h2 { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
font-size: 10rem; |
|||
text-transform: uppercase; |
|||
text-orientation: upright; |
|||
font-weight: bold; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .slider_heading h2 span { |
|||
color: #000000; |
|||
} |
|||
|
|||
.slider_section .detail-box h1 { |
|||
font-size: 3rem; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .detail-box hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 65px; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .detail-box .btn-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.slider_section .detail-box .btn-box .btn-1 { |
|||
display: inline-block; |
|||
padding: 10px 35px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .detail-box .btn-box .btn-1:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: start; |
|||
-ms-flex-align: start; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.slider_section #carouselExampleIndicators .box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: start; |
|||
-ms-flex-pack: start; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
.slider_section .carousel-indicators { |
|||
position: unset; |
|||
margin: 0 70px 45px 70px; |
|||
} |
|||
|
|||
.slider_section .carousel-indicators li { |
|||
text-indent: unset; |
|||
border: none; |
|||
background-color: transparent; |
|||
color: #ffffff; |
|||
font-weight: bold; |
|||
font-size: 2rem; |
|||
opacity: 1; |
|||
display: none; |
|||
} |
|||
|
|||
.slider_section .carousel-indicators li.active { |
|||
display: inline-block; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev, |
|||
.slider_section .carousel-control-next { |
|||
position: absolute; |
|||
top: 45%; |
|||
left: initial; |
|||
right: 25px; |
|||
width: 55px; |
|||
height: 55px; |
|||
border: none; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-size: 8px; |
|||
background-position: center; |
|||
background-color: #000000; |
|||
border-radius: 100%; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev:hover, |
|||
.slider_section .carousel-control-next:hover { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev { |
|||
background-image: url(../images/prev.png); |
|||
-webkit-transform: translateY(57%); |
|||
transform: translateY(57%); |
|||
} |
|||
|
|||
.slider_section .carousel-control-prev:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
|
|||
.slider_section .carousel-control-next { |
|||
background-image: url(../images/next.png); |
|||
-webkit-transform: translateY(-57%); |
|||
transform: translateY(-57%); |
|||
} |
|||
|
|||
.slider_section .carousel-control-next:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
|
|||
.slider_section .number_box { |
|||
width: 50px; |
|||
position: absolute; |
|||
left: 25px; |
|||
top: 50%; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
color: #000000; |
|||
-webkit-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.slider_section .number_box hr { |
|||
border: none; |
|||
width: 1px; |
|||
height: 200px; |
|||
background-color: #000000; |
|||
margin: 2rem 0; |
|||
} |
|||
|
|||
/* end slider section */ |
|||
.about_section { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.about_section .heading_container h2 { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.about_section .about_container { |
|||
padding: 45px; |
|||
background-size: cover; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 125px; |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.about_section .about_container .detail-box a { |
|||
display: inline-block; |
|||
padding: 8px 35px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #ffffff; |
|||
margin: 35px auto 0 auto; |
|||
-webkit-box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
|||
box-shadow: 0 0 35px 0 rgba(99, 247, 79, 0.7); |
|||
} |
|||
|
|||
.about_section .about_container .detail-box a:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.class_section { |
|||
color: #ffffff; |
|||
position: relative; |
|||
} |
|||
|
|||
.class_section .row > div { |
|||
position: unset; |
|||
} |
|||
|
|||
.class_section .class_box-container { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-ms-flex-wrap: wrap; |
|||
flex-wrap: wrap; |
|||
margin-top: 45px; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.class_section .class_box-container .box { |
|||
position: relative; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box { |
|||
position: relative; |
|||
padding-left: 75px; |
|||
background-color: #000000; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: end; |
|||
-ms-flex-align: end; |
|||
align-items: flex-end; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 55px 0; |
|||
border-radius: 10px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button { |
|||
background-color: #292929; |
|||
border: none; |
|||
width: 55px; |
|||
height: 55px; |
|||
margin: 0 10px; |
|||
border-radius: 100%; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box button img { |
|||
width: 20px; |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .img-box .detail-box h2 { |
|||
margin: 0; |
|||
text-transform: uppercase; |
|||
color: #ffffff; |
|||
font-weight: bold; |
|||
line-height: 55px; |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .btn-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .btn-box a { |
|||
display: inline-block; |
|||
padding: 10px 45px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 30px; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.class_section .class_box-container .box .btn-box a:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.class_section .owl-carousel { |
|||
position: unset; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: reverse; |
|||
-ms-flex-direction: column-reverse; |
|||
flex-direction: column-reverse; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 45px; |
|||
-webkit-transform: translateY(-100%); |
|||
transform: translateY(-100%); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev, |
|||
.class_section .owl-carousel .owl-nav .owl-next { |
|||
background-color: #000000; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 100%; |
|||
outline: none; |
|||
margin: 2px 0; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev:hover, |
|||
.class_section .owl-carousel .owl-nav .owl-next:hover { |
|||
background-color: #ffffff; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev { |
|||
width: 75px; |
|||
height: 75px; |
|||
background-image: url(../images/prev.png); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-prev:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-next { |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url(../images/next.png); |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav .owl-next:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
|
|||
.blog_section { |
|||
color: #ffffff; |
|||
overflow-x: hidden; |
|||
} |
|||
|
|||
.blog_section .box { |
|||
margin: 45px 0; |
|||
background-color: #252525; |
|||
} |
|||
|
|||
.blog_section .box .img-box { |
|||
position: relative; |
|||
} |
|||
|
|||
.blog_section .box .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.blog_section .box .detail-box { |
|||
position: relative; |
|||
padding-top: 75px; |
|||
padding-bottom: 35px; |
|||
} |
|||
|
|||
.blog_section .box .detail-box .img_date { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 75px; |
|||
height: 75px; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
background-color: #000000; |
|||
color: #ffffff; |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
-webkit-transform: translateY(-50%); |
|||
transform: translateY(-50%); |
|||
} |
|||
|
|||
.blog_section .box .detail-box .img_date h6 { |
|||
margin: 0; |
|||
} |
|||
|
|||
.blog_section .box .detail-box h3 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.blog_section .box .detail-box a { |
|||
display: inline-block; |
|||
padding: 8px 25px; |
|||
background-color: #000000; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #ffffff; |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.blog_section .box .detail-box a:hover { |
|||
background-color: #ffffff; |
|||
color: #000000; |
|||
} |
|||
|
|||
.blog_section .box.b1 .detail-box { |
|||
padding-right: 35px; |
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box { |
|||
padding-left: 35px; |
|||
} |
|||
|
|||
.blog_section .box.b2 .detail-box .img_date { |
|||
left: 35px; |
|||
} |
|||
|
|||
.client_section { |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.client_section .heading_container { |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
text-align: center; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
.client_section .box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
.client_section .box .img-box { |
|||
width: 125px; |
|||
border-radius: 100%; |
|||
margin-bottom: -62px; |
|||
position: relative; |
|||
z-index: 2; |
|||
} |
|||
|
|||
.client_section .box .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.client_section .box .detail-box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-orient: vertical; |
|||
-webkit-box-direction: normal; |
|||
-ms-flex-direction: column; |
|||
flex-direction: column; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
padding: 95px 25px 45px 25px; |
|||
background-color: #050304; |
|||
} |
|||
|
|||
.client_section .box .detail-box h4 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.client_section .box .detail-box p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
.client_section .box .detail-box img { |
|||
width: 35px; |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-pack: center; |
|||
-ms-flex-pack: center; |
|||
justify-content: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav .owl-prev, |
|||
.client_section .owl-carousel .owl-nav .owl-next { |
|||
width: 55px; |
|||
height: 50px; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 10px; |
|||
outline: none; |
|||
margin: 0; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav .owl-prev { |
|||
background-image: url(../images/prev-arrow.png); |
|||
background-color: #000000; |
|||
-webkit-transform: translateX(10px); |
|||
transform: translateX(10px); |
|||
background-position: 15px center; |
|||
} |
|||
|
|||
.client_section .owl-carousel .owl-nav .owl-next { |
|||
background-image: url(../images/next-arrow.png); |
|||
background-color: #ffffff; |
|||
-webkit-transform: translateX(-10px); |
|||
transform: translateX(-10px); |
|||
} |
|||
|
|||
.info_section .info_main-row { |
|||
-webkit-box-align: end; |
|||
-ms-flex-align: end; |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
.info_section .contact_section { |
|||
position: relative; |
|||
} |
|||
|
|||
.info_section .contact_section h2 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.info_section .contact_section form { |
|||
margin-top: 45px; |
|||
padding-right: 35px; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
.info_section .contact_section input { |
|||
width: 100%; |
|||
border: none; |
|||
height: 50px; |
|||
margin-bottom: 25px; |
|||
padding-left: 25px; |
|||
background-color: #000; |
|||
outline: none; |
|||
color: #ffffff; |
|||
border-radius: 45px; |
|||
} |
|||
|
|||
.info_section .contact_section input::-webkit-input-placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input:-ms-input-placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input::-ms-input-placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input::placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
.info_section .contact_section input.message-box { |
|||
height: 135px; |
|||
border-radius: 25px; |
|||
} |
|||
|
|||
.info_section .contact_section button { |
|||
border: none; |
|||
display: inline-block; |
|||
padding: 12px 55px; |
|||
background-color: #ffffff; |
|||
border: 1px solid transparent; |
|||
border-radius: 35px; |
|||
color: #000000; |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.info_section .contact_section button:hover { |
|||
background-color: #000000; |
|||
color: #ffffff; |
|||
} |
|||
|
|||
.info_section .contact_section .map_container { |
|||
height: 100%; |
|||
min-height: 325px; |
|||
} |
|||
|
|||
.info_section .contact_section .map_container .map-responsive { |
|||
height: 100%; |
|||
} |
|||
|
|||
.info_section .img-box img { |
|||
width: 100%; |
|||
} |
|||
|
|||
/* footer section*/ |
|||
.footer_section { |
|||
margin: 25px 0; |
|||
} |
|||
|
|||
.footer_section .social_box { |
|||
display: -webkit-box; |
|||
display: -ms-flexbox; |
|||
display: flex; |
|||
-webkit-box-align: center; |
|||
-ms-flex-align: center; |
|||
align-items: center; |
|||
} |
|||
|
|||
.footer_section .social_box a { |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
.footer_section .social_box a img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
} |
|||
|
|||
.footer_section p { |
|||
margin: 0; |
|||
margin-top: 25px; |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
.footer_section a { |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
/* end footer section*/ |
|||
/*# sourceMappingURL=style.css.map */ |
|||
File diff suppressed because one or more lines are too long
@ -0,0 +1,888 @@ |
|||
$white: #ffffff; |
|||
$black: #000000; |
|||
$btnBlack: #151615; |
|||
$primary: #000000; |
|||
|
|||
@mixin main-font { |
|||
font-family: "Poppins", sans-serif; |
|||
} |
|||
|
|||
@mixin hero_btn($col1, $col2, $pad1, $pad2, $bRadius) { |
|||
display: inline-block; |
|||
padding: $pad1 $pad2; |
|||
background-color: $col1; |
|||
border: 1px solid transparent; |
|||
border-radius: $bRadius; |
|||
color: $col2; |
|||
|
|||
&:hover { |
|||
background-color: $col2; |
|||
color: $col1; |
|||
} |
|||
} |
|||
|
|||
@mixin upperBold { |
|||
text-transform: uppercase; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
@mixin flexCenter { |
|||
display: flex; |
|||
justify-content: center; |
|||
} |
|||
|
|||
@mixin flexColumnCenter { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
} |
|||
|
|||
body { |
|||
@include main-font; |
|||
color: #040000; |
|||
background-color: $primary; |
|||
} |
|||
|
|||
.layout_padding { |
|||
padding-top: 120px; |
|||
padding-bottom: 120px; |
|||
} |
|||
|
|||
.layout_padding2 { |
|||
padding: 45px 0; |
|||
} |
|||
|
|||
.layout_padding2-top { |
|||
padding-top: 45px; |
|||
} |
|||
|
|||
.layout_padding2-bottom { |
|||
padding-bottom: 45px; |
|||
} |
|||
|
|||
.layout_padding-top { |
|||
padding-top: 120px; |
|||
} |
|||
|
|||
.layout_padding-bottom { |
|||
padding-bottom: 120px; |
|||
} |
|||
|
|||
.heading_container { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
|
|||
h2 { |
|||
font-weight: bold; |
|||
display: flex; |
|||
align-items: center; |
|||
text-transform: uppercase; |
|||
color: #010201; |
|||
} |
|||
} |
|||
|
|||
/*header section*/ |
|||
|
|||
.hero_area { |
|||
height: 100vh; |
|||
background-repeat: no-repeat; |
|||
background-size: cover; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
width: 100%; |
|||
height: 100%; |
|||
background: linear-gradient(to bottom, transparent, transparent, $primary); |
|||
} |
|||
} |
|||
|
|||
.sub_page { |
|||
.hero_area { |
|||
height: auto; |
|||
} |
|||
|
|||
.class_section .owl-carousel .owl-nav { |
|||
top: 55%; |
|||
} |
|||
} |
|||
|
|||
.header_section { |
|||
background-color: $white; |
|||
position: relative; |
|||
|
|||
&::before { |
|||
content: ""; |
|||
position: absolute; |
|||
top: 0; |
|||
right: 0; |
|||
width: 62%; |
|||
height: 45px; |
|||
background: #080203; |
|||
z-index: 1; |
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 8% 100%, 0 0); |
|||
|
|||
} |
|||
|
|||
.nav_container { |
|||
margin: 0 auto; |
|||
} |
|||
|
|||
clip-path: polygon(50% 0%, 100% 0, 100% 100%, 28.5% 100%, 26.5% 86%, 0 84%, 0 0); |
|||
|
|||
|
|||
} |
|||
|
|||
.menu_width { |
|||
width: 100%; |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.header_nav { |
|||
display: flex; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
.main_nav { |
|||
position: relative; |
|||
z-index: 9; |
|||
|
|||
.top_nav { |
|||
ul { |
|||
display: flex; |
|||
margin: 0; |
|||
|
|||
li { |
|||
list-style-type: none; |
|||
|
|||
a { |
|||
display: inline-block; |
|||
color: $white; |
|||
margin: 10px 0 10px 35px; |
|||
|
|||
img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
margin-right: 15px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
.custom_nav-container.navbar-expand-lg .navbar-nav { |
|||
.nav-item { |
|||
.nav-link { |
|||
padding: 10px 20px; |
|||
color: #212121; |
|||
text-align: center; |
|||
text-transform: uppercase; |
|||
} |
|||
} |
|||
} |
|||
|
|||
a, |
|||
a:hover, |
|||
a:focus { |
|||
text-decoration: none; |
|||
} |
|||
|
|||
a:hover, |
|||
a:focus { |
|||
color: initial; |
|||
} |
|||
|
|||
.btn, |
|||
.btn:focus { |
|||
outline: none !important; |
|||
box-shadow: none; |
|||
} |
|||
|
|||
.custom_nav-container .nav_search-btn { |
|||
background-image: url(../images/search-icon.png); |
|||
background-size: 22px; |
|||
background-repeat: no-repeat; |
|||
background-position-y: 7px; |
|||
width: 35px; |
|||
height: 35px; |
|||
padding: 0; |
|||
border: none; |
|||
} |
|||
|
|||
.navbar-brand { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 125px; |
|||
margin-right: 5px; |
|||
} |
|||
|
|||
&.brand_mobile { |
|||
display: none; |
|||
} |
|||
|
|||
} |
|||
|
|||
.custom_nav-container { |
|||
z-index: 99999; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler { |
|||
outline: none; |
|||
} |
|||
|
|||
.custom_nav-container .navbar-toggler .navbar-toggler-icon { |
|||
background-image: url(../images/menu.png); |
|||
background-size: 55px; |
|||
} |
|||
|
|||
/*end header section*/ |
|||
|
|||
/* slider section */ |
|||
|
|||
.slider_section { |
|||
height: calc(100% - 80px); |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
#carouselExampleIndicators { |
|||
width: 100%; |
|||
} |
|||
|
|||
.row { |
|||
.col-md-10 { |
|||
display: flex; |
|||
} |
|||
} |
|||
|
|||
.slider_heading { |
|||
transform: rotate(270.5deg) scaleX(-1); |
|||
position: absolute; |
|||
left: -150px; |
|||
top: -25px; |
|||
|
|||
h2 { |
|||
display: flex; |
|||
font-size: 10rem; |
|||
text-transform: uppercase; |
|||
text-orientation: upright; |
|||
font-weight: bold; |
|||
color: $white; |
|||
|
|||
span { |
|||
color: $primary; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.detail-box { |
|||
h1 { |
|||
font-size: 3rem; |
|||
font-weight: bold; |
|||
text-transform: uppercase; |
|||
color: $white; |
|||
} |
|||
|
|||
hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 65px; |
|||
background-color: $white; |
|||
} |
|||
|
|||
.btn-box { |
|||
display: flex; |
|||
justify-content: center; |
|||
margin-top: 35px; |
|||
|
|||
.btn-1 { |
|||
@include hero_btn($black, $white, 10px, 35px, 35px); |
|||
} |
|||
} |
|||
} |
|||
|
|||
#carouselExampleIndicators { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: flex-start; |
|||
|
|||
.box { |
|||
display: flex; |
|||
justify-content: flex-start; |
|||
} |
|||
} |
|||
|
|||
.carousel-indicators { |
|||
position: unset; |
|||
margin: 0 70px 45px 70px; |
|||
|
|||
|
|||
li { |
|||
text-indent: unset; |
|||
border: none; |
|||
background-color: transparent; |
|||
color: $white; |
|||
font-weight: bold; |
|||
font-size: 2rem; |
|||
opacity: 1; |
|||
display: none; |
|||
|
|||
&.active { |
|||
display: inline-block; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.carousel-control-prev, |
|||
.carousel-control-next { |
|||
position: absolute; |
|||
top: 45%; |
|||
left: initial; |
|||
right: 25px; |
|||
width: 55px; |
|||
height: 55px; |
|||
border: none; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-size: 8px; |
|||
background-position: center; |
|||
background-color: $primary; |
|||
border-radius: 100%; |
|||
|
|||
&:hover { |
|||
background-color: $white; |
|||
} |
|||
} |
|||
|
|||
.carousel-control-prev { |
|||
|
|||
background-image: url(../images/prev.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
|
|||
transform: translateY(57%); |
|||
} |
|||
|
|||
.carousel-control-next { |
|||
background-image: url(../images/next.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
|
|||
transform: translateY(-57%); |
|||
} |
|||
|
|||
|
|||
|
|||
.number_box { |
|||
width: 50px; |
|||
position: absolute; |
|||
left: 25px; |
|||
top: 50%; |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
color: $primary; |
|||
transform: translateY(-50%); |
|||
|
|||
hr { |
|||
border: none; |
|||
width: 1px; |
|||
height: 200px; |
|||
background-color: $primary; |
|||
margin: 2rem 0; |
|||
} |
|||
} |
|||
} |
|||
|
|||
/* end slider section */ |
|||
|
|||
// about section |
|||
|
|||
.about_section { |
|||
color: $white; |
|||
|
|||
.heading_container { |
|||
h2 { |
|||
color: $white; |
|||
} |
|||
} |
|||
|
|||
.about_container { |
|||
padding: 45px; |
|||
background-size: cover; |
|||
|
|||
.detail-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
|
|||
p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
hr { |
|||
margin: 0 auto; |
|||
border: none; |
|||
width: 1.5px; |
|||
height: 125px; |
|||
background-color: $white; |
|||
} |
|||
|
|||
a { |
|||
@include hero_btn($black, $white, 8px, 35px, 35px); |
|||
margin: 35px auto 0 auto; |
|||
box-shadow: 0 0 35px 0 rgba($color: #000000, $alpha: .7); |
|||
} |
|||
} |
|||
} |
|||
} |
|||
|
|||
// end about section |
|||
|
|||
// class section |
|||
|
|||
.class_section { |
|||
color: $white; |
|||
position: relative; |
|||
|
|||
.row>div { |
|||
position: unset; |
|||
} |
|||
|
|||
.class_box-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
margin-top: 45px; |
|||
justify-content: center; |
|||
|
|||
|
|||
.box { |
|||
position: relative; |
|||
|
|||
.img-box { |
|||
position: relative; |
|||
padding-left: 75px; |
|||
background-color: $black; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
|
|||
.detail-box { |
|||
display: flex; |
|||
align-items: flex-end; |
|||
width: 100%; |
|||
height: 100%; |
|||
padding: 55px 0; |
|||
border-radius: 10px; |
|||
position: absolute; |
|||
top: 0; |
|||
left: 0; |
|||
|
|||
button { |
|||
background-color: #292929; |
|||
border: none; |
|||
width: 55px; |
|||
height: 55px; |
|||
margin: 0 10px; |
|||
border-radius: 100%; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
|
|||
img { |
|||
width: 20px; |
|||
margin-left: 5px; |
|||
} |
|||
} |
|||
|
|||
h2 { |
|||
margin: 0; |
|||
text-transform: uppercase; |
|||
color: $white; |
|||
font-weight: bold; |
|||
line-height: 55px; |
|||
margin-left: 15px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.btn-box { |
|||
display: flex; |
|||
margin-top: 30px; |
|||
|
|||
a { |
|||
@include hero_btn($black, $white, 10px, 45px, 30px); |
|||
} |
|||
} |
|||
|
|||
} |
|||
} |
|||
|
|||
|
|||
|
|||
.owl-carousel { |
|||
position: unset; |
|||
|
|||
.owl-nav { |
|||
display: flex; |
|||
flex-direction: column-reverse; |
|||
align-items: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
position: absolute; |
|||
top: 50%; |
|||
right: 45px; |
|||
transform: translateY(-100%); |
|||
|
|||
.owl-prev, |
|||
.owl-next { |
|||
background-color: $black; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 100%; |
|||
outline: none; |
|||
margin: 2px 0; |
|||
|
|||
&:hover { |
|||
background-color: $white; |
|||
} |
|||
} |
|||
|
|||
.owl-prev { |
|||
width: 75px; |
|||
height: 75px; |
|||
background-image: url(../images/prev.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/prev-grey.png); |
|||
} |
|||
} |
|||
|
|||
.owl-next { |
|||
width: 50px; |
|||
height: 50px; |
|||
background-image: url(../images/next.png); |
|||
|
|||
&:hover { |
|||
background-image: url(../images/next-grey.png); |
|||
} |
|||
} |
|||
|
|||
|
|||
} |
|||
} |
|||
} |
|||
|
|||
// end class section |
|||
|
|||
|
|||
// blog section |
|||
|
|||
.blog_section { |
|||
color: $white; |
|||
overflow-x: hidden; |
|||
|
|||
.box { |
|||
margin: 45px 0; |
|||
background-color: #252525; |
|||
|
|||
.img-box { |
|||
position: relative; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
|
|||
|
|||
} |
|||
|
|||
.detail-box { |
|||
position: relative; |
|||
padding-top: 75px; |
|||
padding-bottom: 35px; |
|||
|
|||
.img_date { |
|||
position: absolute; |
|||
left: 0; |
|||
top: 0; |
|||
width: 75px; |
|||
height: 75px; |
|||
border-radius: 100%; |
|||
text-align: center; |
|||
background-color: $primary; |
|||
color: $white; |
|||
display: flex; |
|||
justify-content: center; |
|||
align-items: center; |
|||
transform: translateY(-50%); |
|||
|
|||
h6 { |
|||
margin: 0; |
|||
} |
|||
} |
|||
|
|||
|
|||
h3 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
a { |
|||
@include hero_btn($black, $white, 8px, 25px, 35px); |
|||
margin-top: 35px; |
|||
} |
|||
} |
|||
|
|||
&.b1 { |
|||
.detail-box { |
|||
padding-right: 35px; |
|||
} |
|||
} |
|||
|
|||
&.b2 { |
|||
.detail-box { |
|||
padding-left: 35px; |
|||
|
|||
.img_date { |
|||
left: 35px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
|
|||
} |
|||
|
|||
// end blog section |
|||
|
|||
|
|||
|
|||
// client section |
|||
|
|||
.client_section { |
|||
|
|||
color: $white; |
|||
|
|||
.heading_container { |
|||
align-items: center; |
|||
text-align: center; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
.box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
margin: 0 10px; |
|||
|
|||
.img-box { |
|||
width: 125px; |
|||
border-radius: 100%; |
|||
margin-bottom: -62px; |
|||
position: relative; |
|||
z-index: 2; |
|||
|
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
.detail-box { |
|||
display: flex; |
|||
flex-direction: column; |
|||
align-items: center; |
|||
padding: 95px 25px 45px 25px; |
|||
background-color: #050304; |
|||
|
|||
h4 { |
|||
|
|||
font-weight: bold; |
|||
} |
|||
|
|||
|
|||
|
|||
p { |
|||
margin-top: 25px; |
|||
} |
|||
|
|||
img { |
|||
width: 35px; |
|||
margin-top: 25px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
.owl-carousel .owl-nav { |
|||
display: flex; |
|||
justify-content: center; |
|||
padding: 0 10px; |
|||
margin-top: 55px; |
|||
|
|||
.owl-prev, |
|||
.owl-next { |
|||
// position: absolute; |
|||
width: 55px; |
|||
height: 50px; |
|||
opacity: 1; |
|||
background-repeat: no-repeat; |
|||
background-position: center; |
|||
background-size: 12px; |
|||
border-radius: 10px; |
|||
outline: none; |
|||
margin: 0; |
|||
} |
|||
|
|||
.owl-prev { |
|||
background-image: url(../images/prev-arrow.png); |
|||
background-color: $black; |
|||
transform: translateX(10px); |
|||
background-position: 15px center; |
|||
} |
|||
|
|||
.owl-next { |
|||
background-image: url(../images/next-arrow.png); |
|||
background-color: $white; |
|||
transform: translateX(-10px); |
|||
} |
|||
} |
|||
} |
|||
|
|||
// end client section |
|||
|
|||
// info section |
|||
|
|||
.info_section { |
|||
.info_main-row { |
|||
align-items: flex-end; |
|||
} |
|||
|
|||
// contact section |
|||
.contact_section { |
|||
position: relative; |
|||
|
|||
h2 { |
|||
font-weight: bold; |
|||
} |
|||
|
|||
form { |
|||
margin-top: 45px; |
|||
padding-right: 35px; |
|||
margin-bottom: 45px; |
|||
} |
|||
|
|||
input { |
|||
width: 100%; |
|||
border: none; |
|||
height: 50px; |
|||
margin-bottom: 25px; |
|||
padding-left: 25px; |
|||
background-color: #000; |
|||
outline: none; |
|||
color: $white; |
|||
border-radius: 45px; |
|||
|
|||
&::placeholder { |
|||
color: #737272; |
|||
} |
|||
|
|||
&.message-box { |
|||
height: 135px; |
|||
border-radius: 25px; |
|||
} |
|||
} |
|||
|
|||
button { |
|||
border: none; |
|||
@include hero_btn($white, $black, 12px, 55px, 35px); |
|||
margin-top: 35px; |
|||
} |
|||
|
|||
.map_container { |
|||
height: 100%; |
|||
min-height: 325px; |
|||
|
|||
.map-responsive { |
|||
height: 100%; |
|||
} |
|||
} |
|||
} |
|||
|
|||
// end contact section |
|||
|
|||
|
|||
.img-box { |
|||
img { |
|||
width: 100%; |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
|
|||
// end info section |
|||
|
|||
|
|||
|
|||
/* footer section*/ |
|||
|
|||
.footer_section { |
|||
margin: 25px 0; |
|||
|
|||
.social_box { |
|||
display: flex; |
|||
align-items: center; |
|||
|
|||
a { |
|||
margin-right: 15px; |
|||
|
|||
img { |
|||
max-width: 25px; |
|||
max-height: 25px; |
|||
} |
|||
} |
|||
} |
|||
|
|||
} |
|||
|
|||
.footer_section p { |
|||
margin: 0; |
|||
margin-top: 25px; |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
.footer_section a { |
|||
color: #1c1b1b; |
|||
} |
|||
|
|||
/* end footer section*/ |
|||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
File diff suppressed because it is too large
File diff suppressed because one or more lines are too long
@ -1,4 +1,117 @@ |
|||
<h1>{{ post.title }}</h1> |
|||
<p>{{ post.short_description }}</p> |
|||
<p>{{ post.pub_date }}</p> |
|||
<p>{{ post.content }}</p> |
|||
{% load static %} |
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<!-- Basic --> |
|||
<meta charset="utf-8" /> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|||
<!-- Mobile Metas --> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
|||
<!-- Site Metas --> |
|||
<meta name="keywords" content="" /> |
|||
<meta name="description" content="" /> |
|||
<meta name="author" content="" /> |
|||
|
|||
<title>Prudellic</title> |
|||
|
|||
<!-- slider stylesheet --> |
|||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
|||
|
|||
<!-- bootstrap core css --> |
|||
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/bootstrap.css' %}" /> |
|||
|
|||
<!-- fonts style --> |
|||
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
|||
<!-- Custom styles for this template --> |
|||
<link href="{% static 'blog/css/style.css' %}" rel="stylesheet" /> |
|||
<!-- responsive style --> |
|||
<link href="{% static 'blog/css/responsive.css' %}" rel="stylesheet" /> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<!-- header section strats --> |
|||
<header class="header_section"> |
|||
<div class="container"> |
|||
<div class="header_nav"> |
|||
<a class="navbar-brand brand_desktop" href="index.html"> |
|||
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
|||
</a> |
|||
<div class="main_nav"> |
|||
<div class="top_nav"> |
|||
<ul class=" "> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="{% static 'blog/images/mail.png' %}" alt="" /> |
|||
<span>info@prudellic.com</span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="bottom_nav"> |
|||
<nav class="navbar navbar-expand-lg custom_nav-container"> |
|||
<a class="navbar-brand brand_mobile" href="index.html"> |
|||
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
|||
</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|||
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
|||
<ul class="navbar-nav "> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="index.html">Home </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="about.html"> Blog </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="class.html"> Sexy Stories </a> |
|||
</li> |
|||
|
|||
</ul> |
|||
<form class="form-inline"> |
|||
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
<!-- end header section --> |
|||
</div> |
|||
|
|||
<section class="about_section layout_padding"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 ml-auto pr-0"> |
|||
<div class="about_container"> |
|||
<div class="row"> |
|||
<div class="col-lg-3 col-md-5"> |
|||
<div class="detail-box"> |
|||
<div class="heading_container"> |
|||
<h2> |
|||
{{ post.title }} |
|||
</h2> |
|||
</div> |
|||
<p> |
|||
{{ post.content }} |
|||
</p> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
<!-- end about section --> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
|
|||
@ -0,0 +1,4 @@ |
|||
<h1>{{ post.title }}</h1> |
|||
<p>{{ post.short_description }}</p> |
|||
<p>{{ post.pub_date }}</p> |
|||
<p>{{ post.content }}</p> |
|||
@ -1,77 +1,122 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|||
<title>Dark Blog</title> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
|||
<style> |
|||
body { |
|||
background-color: #222; |
|||
color: #fff; |
|||
padding-top: 56px; /* Adjust this if you have a fixed navbar */ |
|||
} |
|||
|
|||
.navbar { |
|||
background-color: #333; |
|||
} |
|||
|
|||
.container { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.card { |
|||
background-color: #333; |
|||
color: #fff; |
|||
} |
|||
|
|||
.card-header { |
|||
background-color: #555; |
|||
} |
|||
|
|||
.card-body { |
|||
border-top: 1px solid #555; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
|
|||
<!-- Navbar --> |
|||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> |
|||
<a class="navbar-brand" href="#">Dark Blog</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarNav"> |
|||
<ul class="navbar-nav ml-auto"> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</nav> |
|||
|
|||
<!-- Content --> |
|||
<div class="container"> |
|||
<h1 class="mb-4">Dark Blog Posts</h1> |
|||
|
|||
{% for post in posts %} |
|||
<div class="card mb-4"> |
|||
<div class="card-header"> |
|||
<h2><a class="text-white" href="{% url 'blog:post_detail' post.id %}">{{ post.title }}</a></h2> |
|||
</div> |
|||
<div class="card-body"> |
|||
<p>{{ post.short_description }}</p> |
|||
<p class="text-muted">{{ post.pub_date }}</p> |
|||
</div> |
|||
</div> |
|||
{% endfor %} |
|||
</div> |
|||
|
|||
<!-- Bootstrap JavaScript (optional) --> |
|||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js" integrity="sha384-c7IErAlR6aD7me9UaH8aTUpGGUsIfF4hEzQElF6/8zzj/5+8zkbUWEYI6TSA2EZb" crossorigin="anonymous"></script> |
|||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+WyTVMGh/J7kqcG2qNQ8q6vcvcMhvAgi/R" crossorigin="anonymous"></script> |
|||
|
|||
</body> |
|||
</html> |
|||
{% load static %} |
|||
|
|||
<!DOCTYPE html> |
|||
<html> |
|||
|
|||
<head> |
|||
<!-- Basic --> |
|||
<meta charset="utf-8" /> |
|||
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> |
|||
<!-- Mobile Metas --> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" /> |
|||
<!-- Site Metas --> |
|||
<meta name="keywords" content="" /> |
|||
<meta name="description" content="" /> |
|||
<meta name="author" content="" /> |
|||
|
|||
<title>Prudellic</title> |
|||
|
|||
<!-- slider stylesheet --> |
|||
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css" /> |
|||
|
|||
<!-- bootstrap core css --> |
|||
<link rel="stylesheet" type="text/css" href="{% static 'blog/css/bootstrap.css' %}" /> |
|||
|
|||
<!-- fonts style --> |
|||
<link href="https://fonts.googleapis.com/css?family=Baloo+Chettan|Dosis:400,600,700|Poppins:400,600,700&display=swap" rel="stylesheet" /> |
|||
<!-- Custom styles for this template --> |
|||
<link href="{% static 'blog/css/style.css' %}" rel="stylesheet" /> |
|||
<!-- responsive style --> |
|||
<link href="{% static 'blog/css/responsive.css' %}" rel="stylesheet" /> |
|||
</head> |
|||
|
|||
<body> |
|||
|
|||
<!-- header section strats --> |
|||
<header class="header_section"> |
|||
<div class="container"> |
|||
<div class="header_nav"> |
|||
<a class="navbar-brand brand_desktop" href="index.html"> |
|||
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
|||
</a> |
|||
<div class="main_nav"> |
|||
<div class="top_nav"> |
|||
<ul class=" "> |
|||
<li class=""> |
|||
<a class="" href=""> |
|||
<img src="{% static 'blog/images/mail.png' %}" alt="" /> |
|||
<span>info@prudellic.com</span> |
|||
</a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
<div class="bottom_nav"> |
|||
<nav class="navbar navbar-expand-lg custom_nav-container"> |
|||
<a class="navbar-brand brand_mobile" href="index.html"> |
|||
<img src="{% static 'blog/images/logo.png' %}" alt="" /> |
|||
</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarSupportedContent"> |
|||
<div class="d-flex ml-auto flex-column flex-lg-row align-items-center"> |
|||
<ul class="navbar-nav "> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="index.html">Home <span class="sr-only">(current)</span></a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="about.html"> Blog </a> |
|||
</li> |
|||
<li class="nav-item"> |
|||
<a class="nav-link" href="class.html"> Sexy Stories </a> |
|||
</li> |
|||
|
|||
</ul> |
|||
<form class="form-inline"> |
|||
<button class="btn ml-3 ml-lg-5 nav_search-btn" type="submit"></button> |
|||
</form> |
|||
</div> |
|||
</div> |
|||
</nav> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</header> |
|||
<!-- end header section --> |
|||
</div> |
|||
|
|||
{% for post in posts %} |
|||
<section class="about_section layout_padding"> |
|||
<div class="container-fluid"> |
|||
<div class="row"> |
|||
<div class="col-md-10 ml-auto pr-0"> |
|||
<div class="about_container"> |
|||
<div class="row"> |
|||
<div class="col-lg-3 col-md-5"> |
|||
<div class="detail-box"> |
|||
<div class="heading_container"> |
|||
<h2> |
|||
{{ post.title }} |
|||
</h2> |
|||
</div> |
|||
<p> |
|||
{{ post.short_description }} |
|||
</p> |
|||
<a href="{% url 'blog:post_detail' post.id %}"> |
|||
Read More |
|||
</a> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</div> |
|||
</section> |
|||
{% endfor %} |
|||
<!-- end about section --> |
|||
|
|||
</body> |
|||
|
|||
</html> |
|||
@ -0,0 +1,77 @@ |
|||
<!DOCTYPE html> |
|||
<html lang="en"> |
|||
<head> |
|||
<meta charset="UTF-8"> |
|||
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> |
|||
<title>Dark Blog</title> |
|||
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> |
|||
<style> |
|||
body { |
|||
background-color: #222; |
|||
color: #fff; |
|||
padding-top: 56px; /* Adjust this if you have a fixed navbar */ |
|||
} |
|||
|
|||
.navbar { |
|||
background-color: #333; |
|||
} |
|||
|
|||
.container { |
|||
margin-top: 20px; |
|||
} |
|||
|
|||
.card { |
|||
background-color: #333; |
|||
color: #fff; |
|||
} |
|||
|
|||
.card-header { |
|||
background-color: #555; |
|||
} |
|||
|
|||
.card-body { |
|||
border-top: 1px solid #555; |
|||
} |
|||
</style> |
|||
</head> |
|||
<body> |
|||
|
|||
<!-- Navbar --> |
|||
<nav class="navbar navbar-expand-lg navbar-dark fixed-top"> |
|||
<a class="navbar-brand" href="#">Dark Blog</a> |
|||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> |
|||
<span class="navbar-toggler-icon"></span> |
|||
</button> |
|||
<div class="collapse navbar-collapse" id="navbarNav"> |
|||
<ul class="navbar-nav ml-auto"> |
|||
<li class="nav-item active"> |
|||
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a> |
|||
</li> |
|||
</ul> |
|||
</div> |
|||
</nav> |
|||
|
|||
<!-- Content --> |
|||
<div class="container"> |
|||
<h1 class="mb-4">Dark Blog Posts</h1> |
|||
|
|||
{% for post in posts %} |
|||
<div class="card mb-4"> |
|||
<div class="card-header"> |
|||
<h2><a class="text-white" href="{% url 'blog:post_detail' post.id %}">{{ post.title }}</a></h2> |
|||
</div> |
|||
<div class="card-body"> |
|||
<p>{{ post.short_description }}</p> |
|||
<p class="text-muted">{{ post.pub_date }}</p> |
|||
</div> |
|||
</div> |
|||
{% endfor %} |
|||
</div> |
|||
|
|||
<!-- Bootstrap JavaScript (optional) --> |
|||
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> |
|||
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.0.7/dist/umd/popper.min.js" integrity="sha384-c7IErAlR6aD7me9UaH8aTUpGGUsIfF4hEzQElF6/8zzj/5+8zkbUWEYI6TSA2EZb" crossorigin="anonymous"></script> |
|||
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8sh+WyTVMGh/J7kqcG2qNQ8q6vcvcMhvAgi/R" crossorigin="anonymous"></script> |
|||
|
|||
</body> |
|||
</html> |
|||
Binary file not shown.
Binary file not shown.
@ -0,0 +1,275 @@ |
|||
select.admin-autocomplete { |
|||
width: 20em; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container { |
|||
min-height: 30px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--single, |
|||
.select2-container--admin-autocomplete .select2-selection--multiple { |
|||
min-height: 30px; |
|||
padding: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--focus .select2-selection, |
|||
.select2-container--admin-autocomplete.select2-container--open .select2-selection { |
|||
border-color: var(--body-quiet-color); |
|||
min-height: 30px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--single, |
|||
.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--single { |
|||
padding: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--focus .select2-selection.select2-selection--multiple, |
|||
.select2-container--admin-autocomplete.select2-container--open .select2-selection.select2-selection--multiple { |
|||
padding: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--single { |
|||
background-color: var(--body-bg); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__rendered { |
|||
color: var(--body-fg); |
|||
line-height: 30px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__clear { |
|||
cursor: pointer; |
|||
float: right; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__placeholder { |
|||
color: var(--body-quiet-color); |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow { |
|||
height: 26px; |
|||
position: absolute; |
|||
top: 1px; |
|||
right: 1px; |
|||
width: 20px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--single .select2-selection__arrow b { |
|||
border-color: #888 transparent transparent transparent; |
|||
border-style: solid; |
|||
border-width: 5px 4px 0 4px; |
|||
height: 0; |
|||
left: 50%; |
|||
margin-left: -4px; |
|||
margin-top: -2px; |
|||
position: absolute; |
|||
top: 50%; |
|||
width: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__clear { |
|||
float: left; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--single .select2-selection__arrow { |
|||
left: 1px; |
|||
right: auto; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single { |
|||
background-color: var(--darkened-bg); |
|||
cursor: default; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--single .select2-selection__clear { |
|||
display: none; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--open .select2-selection--single .select2-selection__arrow b { |
|||
border-color: transparent transparent #888 transparent; |
|||
border-width: 0 4px 5px 4px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple { |
|||
background-color: var(--body-bg); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 4px; |
|||
cursor: text; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered { |
|||
box-sizing: border-box; |
|||
list-style: none; |
|||
margin: 0; |
|||
padding: 0 10px 5px 5px; |
|||
width: 100%; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__rendered li { |
|||
list-style: none; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__placeholder { |
|||
color: var(--body-quiet-color); |
|||
margin-top: 5px; |
|||
float: left; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__clear { |
|||
cursor: pointer; |
|||
float: right; |
|||
font-weight: bold; |
|||
margin: 5px; |
|||
position: absolute; |
|||
right: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice { |
|||
background-color: var(--darkened-bg); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 4px; |
|||
cursor: default; |
|||
float: left; |
|||
margin-right: 5px; |
|||
margin-top: 5px; |
|||
padding: 0 5px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove { |
|||
color: var(--body-quiet-color); |
|||
cursor: pointer; |
|||
display: inline-block; |
|||
font-weight: bold; |
|||
margin-right: 2px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-selection--multiple .select2-selection__choice__remove:hover { |
|||
color: var(--body-fg); |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__placeholder, .select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-search--inline { |
|||
float: right; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice { |
|||
margin-left: 5px; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete[dir="rtl"] .select2-selection--multiple .select2-selection__choice__remove { |
|||
margin-left: 2px; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--focus .select2-selection--multiple { |
|||
border: solid var(--body-quiet-color) 1px; |
|||
outline: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection--multiple { |
|||
background-color: var(--darkened-bg); |
|||
cursor: default; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--disabled .select2-selection__choice__remove { |
|||
display: none; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--above .select2-selection--multiple { |
|||
border-top-left-radius: 0; |
|||
border-top-right-radius: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--single, .select2-container--admin-autocomplete.select2-container--open.select2-container--below .select2-selection--multiple { |
|||
border-bottom-left-radius: 0; |
|||
border-bottom-right-radius: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-search--dropdown { |
|||
background: var(--darkened-bg); |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-search--dropdown .select2-search__field { |
|||
background: var(--body-bg); |
|||
color: var(--body-fg); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-search--inline .select2-search__field { |
|||
background: transparent; |
|||
color: var(--body-fg); |
|||
border: none; |
|||
outline: 0; |
|||
box-shadow: none; |
|||
-webkit-appearance: textfield; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results > .select2-results__options { |
|||
max-height: 200px; |
|||
overflow-y: auto; |
|||
color: var(--body-fg); |
|||
background: var(--body-bg); |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option[role=group] { |
|||
padding: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option[aria-disabled=true] { |
|||
color: var(--body-quiet-color); |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option[aria-selected=true] { |
|||
background-color: var(--selected-bg); |
|||
color: var(--body-fg); |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option .select2-results__option { |
|||
padding-left: 1em; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__group { |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option { |
|||
margin-left: -1em; |
|||
padding-left: 2em; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
|||
margin-left: -2em; |
|||
padding-left: 3em; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
|||
margin-left: -3em; |
|||
padding-left: 4em; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
|||
margin-left: -4em; |
|||
padding-left: 5em; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option .select2-results__option { |
|||
margin-left: -5em; |
|||
padding-left: 6em; |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__option--highlighted[aria-selected] { |
|||
background-color: var(--primary); |
|||
color: var(--primary-fg); |
|||
} |
|||
|
|||
.select2-container--admin-autocomplete .select2-results__group { |
|||
cursor: default; |
|||
display: block; |
|||
padding: 6px; |
|||
} |
|||
File diff suppressed because it is too large
@ -0,0 +1,328 @@ |
|||
/* CHANGELISTS */ |
|||
|
|||
#changelist { |
|||
display: flex; |
|||
align-items: flex-start; |
|||
justify-content: space-between; |
|||
} |
|||
|
|||
#changelist .changelist-form-container { |
|||
flex: 1 1 auto; |
|||
min-width: 0; |
|||
} |
|||
|
|||
#changelist table { |
|||
width: 100%; |
|||
} |
|||
|
|||
.change-list .hiddenfields { display:none; } |
|||
|
|||
.change-list .filtered table { |
|||
border-right: none; |
|||
} |
|||
|
|||
.change-list .filtered { |
|||
min-height: 400px; |
|||
} |
|||
|
|||
.change-list .filtered .results, .change-list .filtered .paginator, |
|||
.filtered #toolbar, .filtered div.xfull { |
|||
width: auto; |
|||
} |
|||
|
|||
.change-list .filtered table tbody th { |
|||
padding-right: 1em; |
|||
} |
|||
|
|||
#changelist-form .results { |
|||
overflow-x: auto; |
|||
width: 100%; |
|||
} |
|||
|
|||
#changelist .toplinks { |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
#changelist .paginator { |
|||
color: var(--body-quiet-color); |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
background: var(--body-bg); |
|||
overflow: hidden; |
|||
} |
|||
|
|||
/* CHANGELIST TABLES */ |
|||
|
|||
#changelist table thead th { |
|||
padding: 0; |
|||
white-space: nowrap; |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
#changelist table thead th.action-checkbox-column { |
|||
width: 1.5em; |
|||
text-align: center; |
|||
} |
|||
|
|||
#changelist table tbody td.action-checkbox { |
|||
text-align: center; |
|||
} |
|||
|
|||
#changelist table tfoot { |
|||
color: var(--body-quiet-color); |
|||
} |
|||
|
|||
/* TOOLBAR */ |
|||
|
|||
#toolbar { |
|||
padding: 8px 10px; |
|||
margin-bottom: 15px; |
|||
border-top: 1px solid var(--hairline-color); |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
background: var(--darkened-bg); |
|||
color: var(--body-quiet-color); |
|||
} |
|||
|
|||
#toolbar form input { |
|||
border-radius: 4px; |
|||
font-size: 0.875rem; |
|||
padding: 5px; |
|||
color: var(--body-fg); |
|||
} |
|||
|
|||
#toolbar #searchbar { |
|||
height: 1.1875rem; |
|||
border: 1px solid var(--border-color); |
|||
padding: 2px 5px; |
|||
margin: 0; |
|||
vertical-align: top; |
|||
font-size: 0.8125rem; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
#toolbar #searchbar:focus { |
|||
border-color: var(--body-quiet-color); |
|||
} |
|||
|
|||
#toolbar form input[type="submit"] { |
|||
border: 1px solid var(--border-color); |
|||
font-size: 0.8125rem; |
|||
padding: 4px 8px; |
|||
margin: 0; |
|||
vertical-align: middle; |
|||
background: var(--body-bg); |
|||
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; |
|||
cursor: pointer; |
|||
color: var(--body-fg); |
|||
} |
|||
|
|||
#toolbar form input[type="submit"]:focus, |
|||
#toolbar form input[type="submit"]:hover { |
|||
border-color: var(--body-quiet-color); |
|||
} |
|||
|
|||
#changelist-search img { |
|||
vertical-align: middle; |
|||
margin-right: 4px; |
|||
} |
|||
|
|||
#changelist-search .help { |
|||
word-break: break-word; |
|||
} |
|||
|
|||
/* FILTER COLUMN */ |
|||
|
|||
#changelist-filter { |
|||
flex: 0 0 240px; |
|||
order: 1; |
|||
background: var(--darkened-bg); |
|||
border-left: none; |
|||
margin: 0 0 0 30px; |
|||
} |
|||
|
|||
#changelist-filter h2 { |
|||
font-size: 0.875rem; |
|||
text-transform: uppercase; |
|||
letter-spacing: 0.5px; |
|||
padding: 5px 15px; |
|||
margin-bottom: 12px; |
|||
border-bottom: none; |
|||
} |
|||
|
|||
#changelist-filter h3, |
|||
#changelist-filter details summary { |
|||
font-weight: 400; |
|||
padding: 0 15px; |
|||
margin-bottom: 10px; |
|||
} |
|||
|
|||
#changelist-filter details summary > * { |
|||
display: inline; |
|||
} |
|||
|
|||
#changelist-filter details > summary { |
|||
list-style-type: none; |
|||
} |
|||
|
|||
#changelist-filter details > summary::-webkit-details-marker { |
|||
display: none; |
|||
} |
|||
|
|||
#changelist-filter details > summary::before { |
|||
content: '→'; |
|||
font-weight: bold; |
|||
color: var(--link-hover-color); |
|||
} |
|||
|
|||
#changelist-filter details[open] > summary::before { |
|||
content: '↓'; |
|||
} |
|||
|
|||
#changelist-filter ul { |
|||
margin: 5px 0; |
|||
padding: 0 15px 15px; |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
#changelist-filter ul:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
#changelist-filter li { |
|||
list-style-type: none; |
|||
margin-left: 0; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
#changelist-filter a { |
|||
display: block; |
|||
color: var(--body-quiet-color); |
|||
word-break: break-word; |
|||
} |
|||
|
|||
#changelist-filter li.selected { |
|||
border-left: 5px solid var(--hairline-color); |
|||
padding-left: 10px; |
|||
margin-left: -15px; |
|||
} |
|||
|
|||
#changelist-filter li.selected a { |
|||
color: var(--link-selected-fg); |
|||
} |
|||
|
|||
#changelist-filter a:focus, #changelist-filter a:hover, |
|||
#changelist-filter li.selected a:focus, |
|||
#changelist-filter li.selected a:hover { |
|||
color: var(--link-hover-color); |
|||
} |
|||
|
|||
#changelist-filter #changelist-filter-clear a { |
|||
font-size: 0.8125rem; |
|||
padding-bottom: 10px; |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
/* DATE DRILLDOWN */ |
|||
|
|||
.change-list .toplinks { |
|||
display: flex; |
|||
padding-bottom: 5px; |
|||
flex-wrap: wrap; |
|||
gap: 3px 17px; |
|||
font-weight: bold; |
|||
} |
|||
|
|||
.change-list .toplinks a { |
|||
font-size: 0.8125rem; |
|||
} |
|||
|
|||
.change-list .toplinks .date-back { |
|||
color: var(--body-quiet-color); |
|||
} |
|||
|
|||
.change-list .toplinks .date-back:focus, |
|||
.change-list .toplinks .date-back:hover { |
|||
color: var(--link-hover-color); |
|||
} |
|||
|
|||
/* ACTIONS */ |
|||
|
|||
.filtered .actions { |
|||
border-right: none; |
|||
} |
|||
|
|||
#changelist table input { |
|||
margin: 0; |
|||
vertical-align: baseline; |
|||
} |
|||
|
|||
/* Once the :has() pseudo-class is supported by all browsers, the tr.selected |
|||
selector and the JS adding the class can be removed. */ |
|||
#changelist tbody tr.selected { |
|||
background-color: var(--selected-row); |
|||
} |
|||
|
|||
#changelist tbody tr:has(.action-select:checked) { |
|||
background-color: var(--selected-row); |
|||
} |
|||
|
|||
#changelist .actions { |
|||
padding: 10px; |
|||
background: var(--body-bg); |
|||
border-top: none; |
|||
border-bottom: none; |
|||
line-height: 1.5rem; |
|||
color: var(--body-quiet-color); |
|||
width: 100%; |
|||
} |
|||
|
|||
#changelist .actions span.all, |
|||
#changelist .actions span.action-counter, |
|||
#changelist .actions span.clear, |
|||
#changelist .actions span.question { |
|||
font-size: 0.8125rem; |
|||
margin: 0 0.5em; |
|||
} |
|||
|
|||
#changelist .actions:last-child { |
|||
border-bottom: none; |
|||
} |
|||
|
|||
#changelist .actions select { |
|||
vertical-align: top; |
|||
height: 1.5rem; |
|||
color: var(--body-fg); |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 4px; |
|||
font-size: 0.875rem; |
|||
padding: 0 0 0 4px; |
|||
margin: 0; |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
#changelist .actions select:focus { |
|||
border-color: var(--body-quiet-color); |
|||
} |
|||
|
|||
#changelist .actions label { |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
font-size: 0.8125rem; |
|||
} |
|||
|
|||
#changelist .actions .button { |
|||
font-size: 0.8125rem; |
|||
border: 1px solid var(--border-color); |
|||
border-radius: 4px; |
|||
background: var(--body-bg); |
|||
box-shadow: 0 -15px 20px -10px rgba(0, 0, 0, 0.15) inset; |
|||
cursor: pointer; |
|||
height: 1.5rem; |
|||
line-height: 1; |
|||
padding: 4px 8px; |
|||
margin: 0; |
|||
color: var(--body-fg); |
|||
} |
|||
|
|||
#changelist .actions .button:focus, #changelist .actions .button:hover { |
|||
border-color: var(--body-quiet-color); |
|||
} |
|||
@ -0,0 +1,137 @@ |
|||
@media (prefers-color-scheme: dark) { |
|||
:root { |
|||
--primary: #264b5d; |
|||
--primary-fg: #f7f7f7; |
|||
|
|||
--body-fg: #eeeeee; |
|||
--body-bg: #121212; |
|||
--body-quiet-color: #e0e0e0; |
|||
--body-loud-color: #ffffff; |
|||
|
|||
--breadcrumbs-link-fg: #e0e0e0; |
|||
--breadcrumbs-bg: var(--primary); |
|||
|
|||
--link-fg: #81d4fa; |
|||
--link-hover-color: #4ac1f7; |
|||
--link-selected-fg: #6f94c6; |
|||
|
|||
--hairline-color: #272727; |
|||
--border-color: #353535; |
|||
|
|||
--error-fg: #e35f5f; |
|||
--message-success-bg: #006b1b; |
|||
--message-warning-bg: #583305; |
|||
--message-error-bg: #570808; |
|||
|
|||
--darkened-bg: #212121; |
|||
--selected-bg: #1b1b1b; |
|||
--selected-row: #00363a; |
|||
|
|||
--close-button-bg: #333333; |
|||
--close-button-hover-bg: #666666; |
|||
} |
|||
} |
|||
|
|||
|
|||
html[data-theme="dark"] { |
|||
--primary: #264b5d; |
|||
--primary-fg: #f7f7f7; |
|||
|
|||
--body-fg: #eeeeee; |
|||
--body-bg: #121212; |
|||
--body-quiet-color: #e0e0e0; |
|||
--body-loud-color: #ffffff; |
|||
|
|||
--breadcrumbs-link-fg: #e0e0e0; |
|||
--breadcrumbs-bg: var(--primary); |
|||
|
|||
--link-fg: #81d4fa; |
|||
--link-hover-color: #4ac1f7; |
|||
--link-selected-fg: #6f94c6; |
|||
|
|||
--hairline-color: #272727; |
|||
--border-color: #353535; |
|||
|
|||
--error-fg: #e35f5f; |
|||
--message-success-bg: #006b1b; |
|||
--message-warning-bg: #583305; |
|||
--message-error-bg: #570808; |
|||
|
|||
--darkened-bg: #212121; |
|||
--selected-bg: #1b1b1b; |
|||
--selected-row: #00363a; |
|||
|
|||
--close-button-bg: #333333; |
|||
--close-button-hover-bg: #666666; |
|||
} |
|||
|
|||
/* THEME SWITCH */ |
|||
.theme-toggle { |
|||
cursor: pointer; |
|||
border: none; |
|||
padding: 0; |
|||
background: transparent; |
|||
vertical-align: middle; |
|||
margin-inline-start: 5px; |
|||
margin-top: -1px; |
|||
} |
|||
|
|||
.theme-toggle svg { |
|||
vertical-align: middle; |
|||
height: 1rem; |
|||
width: 1rem; |
|||
display: none; |
|||
} |
|||
|
|||
/* |
|||
Fully hide screen reader text so we only show the one matching the current |
|||
theme. |
|||
*/ |
|||
.theme-toggle .visually-hidden { |
|||
display: none; |
|||
} |
|||
|
|||
html[data-theme="auto"] .theme-toggle .theme-label-when-auto { |
|||
display: block; |
|||
} |
|||
|
|||
html[data-theme="dark"] .theme-toggle .theme-label-when-dark { |
|||
display: block; |
|||
} |
|||
|
|||
html[data-theme="light"] .theme-toggle .theme-label-when-light { |
|||
display: block; |
|||
} |
|||
|
|||
/* ICONS */ |
|||
.theme-toggle svg.theme-icon-when-auto, |
|||
.theme-toggle svg.theme-icon-when-dark, |
|||
.theme-toggle svg.theme-icon-when-light { |
|||
fill: var(--header-link-color); |
|||
color: var(--header-bg); |
|||
} |
|||
|
|||
html[data-theme="auto"] .theme-toggle svg.theme-icon-when-auto { |
|||
display: block; |
|||
} |
|||
|
|||
html[data-theme="dark"] .theme-toggle svg.theme-icon-when-dark { |
|||
display: block; |
|||
} |
|||
|
|||
html[data-theme="light"] .theme-toggle svg.theme-icon-when-light { |
|||
display: block; |
|||
} |
|||
|
|||
.visually-hidden { |
|||
position: absolute; |
|||
width: 1px; |
|||
height: 1px; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
clip: rect(0,0,0,0); |
|||
white-space: nowrap; |
|||
border: 0; |
|||
color: var(--body-fg); |
|||
background-color: var(--body-bg); |
|||
} |
|||
@ -0,0 +1,29 @@ |
|||
/* DASHBOARD */ |
|||
.dashboard td, .dashboard th { |
|||
word-break: break-word; |
|||
} |
|||
|
|||
.dashboard .module table th { |
|||
width: 100%; |
|||
} |
|||
|
|||
.dashboard .module table td { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
.dashboard .module table td a { |
|||
display: block; |
|||
padding-right: .6em; |
|||
} |
|||
|
|||
/* RECENT ACTIONS MODULE */ |
|||
|
|||
.module ul.actionlist { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
ul.actionlist li { |
|||
list-style-type: none; |
|||
overflow: hidden; |
|||
text-overflow: ellipsis; |
|||
} |
|||
@ -0,0 +1,530 @@ |
|||
@import url('widgets.css'); |
|||
|
|||
/* FORM ROWS */ |
|||
|
|||
.form-row { |
|||
overflow: hidden; |
|||
padding: 10px; |
|||
font-size: 0.8125rem; |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
.form-row img, .form-row input { |
|||
vertical-align: middle; |
|||
} |
|||
|
|||
.form-row label input[type="checkbox"] { |
|||
margin-top: 0; |
|||
vertical-align: 0; |
|||
} |
|||
|
|||
form .form-row p { |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.flex-container { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
.form-multiline > div { |
|||
padding-bottom: 10px; |
|||
} |
|||
|
|||
/* FORM LABELS */ |
|||
|
|||
label { |
|||
font-weight: normal; |
|||
color: var(--body-quiet-color); |
|||
font-size: 0.8125rem; |
|||
} |
|||
|
|||
.required label, label.required { |
|||
font-weight: bold; |
|||
color: var(--body-fg); |
|||
} |
|||
|
|||
/* RADIO BUTTONS */ |
|||
|
|||
form div.radiolist div { |
|||
padding-right: 7px; |
|||
} |
|||
|
|||
form div.radiolist.inline div { |
|||
display: inline-block; |
|||
} |
|||
|
|||
form div.radiolist label { |
|||
width: auto; |
|||
} |
|||
|
|||
form div.radiolist input[type="radio"] { |
|||
margin: -2px 4px 0 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
form ul.inline { |
|||
margin-left: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
form ul.inline li { |
|||
float: left; |
|||
padding-right: 7px; |
|||
} |
|||
|
|||
/* ALIGNED FIELDSETS */ |
|||
|
|||
.aligned label { |
|||
display: block; |
|||
padding: 4px 10px 0 0; |
|||
width: 160px; |
|||
word-wrap: break-word; |
|||
line-height: 1; |
|||
} |
|||
|
|||
.aligned label:not(.vCheckboxLabel):after { |
|||
content: ''; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
height: 1.625rem; |
|||
} |
|||
|
|||
.aligned label + p, .aligned .checkbox-row + div.help, .aligned label + div.readonly { |
|||
padding: 6px 0; |
|||
margin-top: 0; |
|||
margin-bottom: 0; |
|||
margin-left: 0; |
|||
overflow-wrap: break-word; |
|||
} |
|||
|
|||
.aligned ul label { |
|||
display: inline; |
|||
float: none; |
|||
width: auto; |
|||
} |
|||
|
|||
.aligned .form-row input { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.colMS .aligned .vLargeTextField, .colMS .aligned .vXMLLargeTextField { |
|||
width: 350px; |
|||
} |
|||
|
|||
form .aligned ul { |
|||
margin-left: 160px; |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
form .aligned div.radiolist { |
|||
display: inline-block; |
|||
margin: 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
form .aligned p.help, |
|||
form .aligned div.help { |
|||
margin-top: 0; |
|||
margin-left: 160px; |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
form .aligned p.date div.help.timezonewarning, |
|||
form .aligned p.datetime div.help.timezonewarning, |
|||
form .aligned p.time div.help.timezonewarning { |
|||
margin-left: 0; |
|||
padding-left: 0; |
|||
font-weight: normal; |
|||
} |
|||
|
|||
form .aligned p.help:last-child, |
|||
form .aligned div.help:last-child { |
|||
margin-bottom: 0; |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
form .aligned input + p.help, |
|||
form .aligned textarea + p.help, |
|||
form .aligned select + p.help, |
|||
form .aligned input + div.help, |
|||
form .aligned textarea + div.help, |
|||
form .aligned select + div.help { |
|||
margin-left: 160px; |
|||
padding-left: 10px; |
|||
} |
|||
|
|||
form .aligned ul li { |
|||
list-style: none; |
|||
} |
|||
|
|||
form .aligned table p { |
|||
margin-left: 0; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.aligned .vCheckboxLabel { |
|||
float: none; |
|||
width: auto; |
|||
display: inline-block; |
|||
vertical-align: -3px; |
|||
padding: 0 0 5px 5px; |
|||
} |
|||
|
|||
.aligned .vCheckboxLabel + p.help, |
|||
.aligned .vCheckboxLabel + div.help { |
|||
margin-top: -4px; |
|||
} |
|||
|
|||
.colM .aligned .vLargeTextField, .colM .aligned .vXMLLargeTextField { |
|||
width: 610px; |
|||
} |
|||
|
|||
fieldset .fieldBox { |
|||
margin-right: 20px; |
|||
} |
|||
|
|||
/* WIDE FIELDSETS */ |
|||
|
|||
.wide label { |
|||
width: 200px; |
|||
} |
|||
|
|||
form .wide p, |
|||
form .wide ul.errorlist, |
|||
form .wide input + p.help, |
|||
form .wide input + div.help { |
|||
margin-left: 200px; |
|||
} |
|||
|
|||
form .wide p.help, |
|||
form .wide div.help { |
|||
padding-left: 50px; |
|||
} |
|||
|
|||
form div.help ul { |
|||
padding-left: 0; |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.colM fieldset.wide .vLargeTextField, .colM fieldset.wide .vXMLLargeTextField { |
|||
width: 450px; |
|||
} |
|||
|
|||
/* COLLAPSED FIELDSETS */ |
|||
|
|||
fieldset.collapsed * { |
|||
display: none; |
|||
} |
|||
|
|||
fieldset.collapsed h2, fieldset.collapsed { |
|||
display: block; |
|||
} |
|||
|
|||
fieldset.collapsed { |
|||
border: 1px solid var(--hairline-color); |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
fieldset.collapsed h2 { |
|||
background: var(--darkened-bg); |
|||
color: var(--body-quiet-color); |
|||
} |
|||
|
|||
fieldset .collapse-toggle { |
|||
color: var(--header-link-color); |
|||
} |
|||
|
|||
fieldset.collapsed .collapse-toggle { |
|||
background: transparent; |
|||
display: inline; |
|||
color: var(--link-fg); |
|||
} |
|||
|
|||
/* MONOSPACE TEXTAREAS */ |
|||
|
|||
fieldset.monospace textarea { |
|||
font-family: var(--font-family-monospace); |
|||
} |
|||
|
|||
/* SUBMIT ROW */ |
|||
|
|||
.submit-row { |
|||
padding: 12px 14px 12px; |
|||
margin: 0 0 20px; |
|||
background: var(--darkened-bg); |
|||
border: 1px solid var(--hairline-color); |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
display: flex; |
|||
gap: 10px; |
|||
flex-wrap: wrap; |
|||
} |
|||
|
|||
body.popup .submit-row { |
|||
overflow: auto; |
|||
} |
|||
|
|||
.submit-row input { |
|||
height: 2.1875rem; |
|||
line-height: 0.9375rem; |
|||
} |
|||
|
|||
.submit-row input, .submit-row a { |
|||
margin: 0; |
|||
} |
|||
|
|||
.submit-row input.default { |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.submit-row a.deletelink { |
|||
margin-left: auto; |
|||
} |
|||
|
|||
.submit-row a.deletelink { |
|||
display: block; |
|||
background: var(--delete-button-bg); |
|||
border-radius: 4px; |
|||
padding: 0.625rem 0.9375rem; |
|||
height: 0.9375rem; |
|||
line-height: 0.9375rem; |
|||
color: var(--button-fg); |
|||
} |
|||
|
|||
.submit-row a.closelink { |
|||
display: inline-block; |
|||
background: var(--close-button-bg); |
|||
border-radius: 4px; |
|||
padding: 10px 15px; |
|||
height: 0.9375rem; |
|||
line-height: 0.9375rem; |
|||
color: var(--button-fg); |
|||
} |
|||
|
|||
.submit-row a.deletelink:focus, |
|||
.submit-row a.deletelink:hover, |
|||
.submit-row a.deletelink:active { |
|||
background: var(--delete-button-hover-bg); |
|||
text-decoration: none; |
|||
} |
|||
|
|||
.submit-row a.closelink:focus, |
|||
.submit-row a.closelink:hover, |
|||
.submit-row a.closelink:active { |
|||
background: var(--close-button-hover-bg); |
|||
text-decoration: none; |
|||
} |
|||
|
|||
/* CUSTOM FORM FIELDS */ |
|||
|
|||
.vSelectMultipleField { |
|||
vertical-align: top; |
|||
} |
|||
|
|||
.vCheckboxField { |
|||
border: none; |
|||
} |
|||
|
|||
.vDateField, .vTimeField { |
|||
margin-right: 2px; |
|||
margin-bottom: 4px; |
|||
} |
|||
|
|||
.vDateField { |
|||
min-width: 6.85em; |
|||
} |
|||
|
|||
.vTimeField { |
|||
min-width: 4.7em; |
|||
} |
|||
|
|||
.vURLField { |
|||
width: 30em; |
|||
} |
|||
|
|||
.vLargeTextField, .vXMLLargeTextField { |
|||
width: 48em; |
|||
} |
|||
|
|||
.flatpages-flatpage #id_content { |
|||
height: 40.2em; |
|||
} |
|||
|
|||
.module table .vPositiveSmallIntegerField { |
|||
width: 2.2em; |
|||
} |
|||
|
|||
.vIntegerField { |
|||
width: 5em; |
|||
} |
|||
|
|||
.vBigIntegerField { |
|||
width: 10em; |
|||
} |
|||
|
|||
.vForeignKeyRawIdAdminField { |
|||
width: 5em; |
|||
} |
|||
|
|||
.vTextField, .vUUIDField { |
|||
width: 20em; |
|||
} |
|||
|
|||
/* INLINES */ |
|||
|
|||
.inline-group { |
|||
padding: 0; |
|||
margin: 0 0 30px; |
|||
} |
|||
|
|||
.inline-group thead th { |
|||
padding: 8px 10px; |
|||
} |
|||
|
|||
.inline-group .aligned label { |
|||
width: 160px; |
|||
} |
|||
|
|||
.inline-related { |
|||
position: relative; |
|||
} |
|||
|
|||
.inline-related h3 { |
|||
margin: 0; |
|||
color: var(--body-quiet-color); |
|||
padding: 5px; |
|||
font-size: 0.8125rem; |
|||
background: var(--darkened-bg); |
|||
border-top: 1px solid var(--hairline-color); |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
.inline-related h3 span.delete { |
|||
float: right; |
|||
} |
|||
|
|||
.inline-related h3 span.delete label { |
|||
margin-left: 2px; |
|||
font-size: 0.6875rem; |
|||
} |
|||
|
|||
.inline-related fieldset { |
|||
margin: 0; |
|||
background: var(--body-bg); |
|||
border: none; |
|||
width: 100%; |
|||
} |
|||
|
|||
.inline-related fieldset.module h3 { |
|||
margin: 0; |
|||
padding: 2px 5px 3px 5px; |
|||
font-size: 0.6875rem; |
|||
text-align: left; |
|||
font-weight: bold; |
|||
background: #bcd; |
|||
color: var(--body-bg); |
|||
} |
|||
|
|||
.inline-group .tabular fieldset.module { |
|||
border: none; |
|||
} |
|||
|
|||
.inline-related.tabular fieldset.module table { |
|||
width: 100%; |
|||
overflow-x: scroll; |
|||
} |
|||
|
|||
.last-related fieldset { |
|||
border: none; |
|||
} |
|||
|
|||
.inline-group .tabular tr.has_original td { |
|||
padding-top: 2em; |
|||
} |
|||
|
|||
.inline-group .tabular tr td.original { |
|||
padding: 2px 0 0 0; |
|||
width: 0; |
|||
_position: relative; |
|||
} |
|||
|
|||
.inline-group .tabular th.original { |
|||
width: 0px; |
|||
padding: 0; |
|||
} |
|||
|
|||
.inline-group .tabular td.original p { |
|||
position: absolute; |
|||
left: 0; |
|||
height: 1.1em; |
|||
padding: 2px 9px; |
|||
overflow: hidden; |
|||
font-size: 0.5625rem; |
|||
font-weight: bold; |
|||
color: var(--body-quiet-color); |
|||
_width: 700px; |
|||
} |
|||
|
|||
.inline-group ul.tools { |
|||
padding: 0; |
|||
margin: 0; |
|||
list-style: none; |
|||
} |
|||
|
|||
.inline-group ul.tools li { |
|||
display: inline; |
|||
padding: 0 5px; |
|||
} |
|||
|
|||
.inline-group div.add-row, |
|||
.inline-group .tabular tr.add-row td { |
|||
color: var(--body-quiet-color); |
|||
background: var(--darkened-bg); |
|||
padding: 8px 10px; |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
.inline-group .tabular tr.add-row td { |
|||
padding: 8px 10px; |
|||
border-bottom: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
.inline-group ul.tools a.add, |
|||
.inline-group div.add-row a, |
|||
.inline-group .tabular tr.add-row td a { |
|||
background: url(../img/icon-addlink.svg) 0 1px no-repeat; |
|||
padding-left: 16px; |
|||
font-size: 0.75rem; |
|||
} |
|||
|
|||
.empty-form { |
|||
display: none; |
|||
} |
|||
|
|||
/* RELATED FIELD ADD ONE / LOOKUP */ |
|||
|
|||
.related-lookup { |
|||
margin-left: 5px; |
|||
display: inline-block; |
|||
vertical-align: middle; |
|||
background-repeat: no-repeat; |
|||
background-size: 14px; |
|||
} |
|||
|
|||
.related-lookup { |
|||
width: 1rem; |
|||
height: 1rem; |
|||
background-image: url(../img/search.svg); |
|||
} |
|||
|
|||
form .related-widget-wrapper ul { |
|||
display: inline-block; |
|||
margin-left: 0; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
.clearable-file-input input { |
|||
margin-top: 0; |
|||
} |
|||
@ -0,0 +1,61 @@ |
|||
/* LOGIN FORM */ |
|||
|
|||
.login { |
|||
background: var(--darkened-bg); |
|||
height: auto; |
|||
} |
|||
|
|||
.login #header { |
|||
height: auto; |
|||
padding: 15px 16px; |
|||
justify-content: center; |
|||
} |
|||
|
|||
.login #header h1 { |
|||
font-size: 1.125rem; |
|||
margin: 0; |
|||
} |
|||
|
|||
.login #header h1 a { |
|||
color: var(--header-link-color); |
|||
} |
|||
|
|||
.login #content { |
|||
padding: 20px 20px 0; |
|||
} |
|||
|
|||
.login #container { |
|||
background: var(--body-bg); |
|||
border: 1px solid var(--hairline-color); |
|||
border-radius: 4px; |
|||
overflow: hidden; |
|||
width: 28em; |
|||
min-width: 300px; |
|||
margin: 100px auto; |
|||
height: auto; |
|||
} |
|||
|
|||
.login .form-row { |
|||
padding: 4px 0; |
|||
} |
|||
|
|||
.login .form-row label { |
|||
display: block; |
|||
line-height: 2em; |
|||
} |
|||
|
|||
.login .form-row #id_username, .login .form-row #id_password { |
|||
padding: 8px; |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.login .submit-row { |
|||
padding: 1em 0 0 0; |
|||
margin: 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.login .password-reset-link { |
|||
text-align: center; |
|||
} |
|||
@ -0,0 +1,144 @@ |
|||
.sticky { |
|||
position: sticky; |
|||
top: 0; |
|||
max-height: 100vh; |
|||
} |
|||
|
|||
.toggle-nav-sidebar { |
|||
z-index: 20; |
|||
left: 0; |
|||
display: flex; |
|||
align-items: center; |
|||
justify-content: center; |
|||
flex: 0 0 23px; |
|||
width: 23px; |
|||
border: 0; |
|||
border-right: 1px solid var(--hairline-color); |
|||
background-color: var(--body-bg); |
|||
cursor: pointer; |
|||
font-size: 1.25rem; |
|||
color: var(--link-fg); |
|||
padding: 0; |
|||
} |
|||
|
|||
[dir="rtl"] .toggle-nav-sidebar { |
|||
border-left: 1px solid var(--hairline-color); |
|||
border-right: 0; |
|||
} |
|||
|
|||
.toggle-nav-sidebar:hover, |
|||
.toggle-nav-sidebar:focus { |
|||
background-color: var(--darkened-bg); |
|||
} |
|||
|
|||
#nav-sidebar { |
|||
z-index: 15; |
|||
flex: 0 0 275px; |
|||
left: -276px; |
|||
margin-left: -276px; |
|||
border-top: 1px solid transparent; |
|||
border-right: 1px solid var(--hairline-color); |
|||
background-color: var(--body-bg); |
|||
overflow: auto; |
|||
} |
|||
|
|||
[dir="rtl"] #nav-sidebar { |
|||
border-left: 1px solid var(--hairline-color); |
|||
border-right: 0; |
|||
left: 0; |
|||
margin-left: 0; |
|||
right: -276px; |
|||
margin-right: -276px; |
|||
} |
|||
|
|||
.toggle-nav-sidebar::before { |
|||
content: '\00BB'; |
|||
} |
|||
|
|||
.main.shifted .toggle-nav-sidebar::before { |
|||
content: '\00AB'; |
|||
} |
|||
|
|||
.main > #nav-sidebar { |
|||
visibility: hidden; |
|||
} |
|||
|
|||
.main.shifted > #nav-sidebar { |
|||
margin-left: 0; |
|||
visibility: visible; |
|||
} |
|||
|
|||
[dir="rtl"] .main.shifted > #nav-sidebar { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
#nav-sidebar .module th { |
|||
width: 100%; |
|||
overflow-wrap: anywhere; |
|||
} |
|||
|
|||
#nav-sidebar .module th, |
|||
#nav-sidebar .module caption { |
|||
padding-left: 16px; |
|||
} |
|||
|
|||
#nav-sidebar .module td { |
|||
white-space: nowrap; |
|||
} |
|||
|
|||
[dir="rtl"] #nav-sidebar .module th, |
|||
[dir="rtl"] #nav-sidebar .module caption { |
|||
padding-left: 8px; |
|||
padding-right: 16px; |
|||
} |
|||
|
|||
#nav-sidebar .current-app .section:link, |
|||
#nav-sidebar .current-app .section:visited { |
|||
color: var(--header-color); |
|||
font-weight: bold; |
|||
} |
|||
|
|||
#nav-sidebar .current-model { |
|||
background: var(--selected-row); |
|||
} |
|||
|
|||
.main > #nav-sidebar + .content { |
|||
max-width: calc(100% - 23px); |
|||
} |
|||
|
|||
.main.shifted > #nav-sidebar + .content { |
|||
max-width: calc(100% - 299px); |
|||
} |
|||
|
|||
@media (max-width: 767px) { |
|||
#nav-sidebar, #toggle-nav-sidebar { |
|||
display: none; |
|||
} |
|||
|
|||
.main > #nav-sidebar + .content, |
|||
.main.shifted > #nav-sidebar + .content { |
|||
max-width: 100%; |
|||
} |
|||
} |
|||
|
|||
#nav-filter { |
|||
width: 100%; |
|||
box-sizing: border-box; |
|||
padding: 2px 5px; |
|||
margin: 5px 0; |
|||
border: 1px solid var(--border-color); |
|||
background-color: var(--darkened-bg); |
|||
color: var(--body-fg); |
|||
} |
|||
|
|||
#nav-filter:focus { |
|||
border-color: var(--body-quiet-color); |
|||
} |
|||
|
|||
#nav-filter.no-results { |
|||
background: var(--message-error-bg); |
|||
} |
|||
|
|||
#nav-sidebar table { |
|||
width: 100%; |
|||
} |
|||
@ -0,0 +1,998 @@ |
|||
/* Tablets */ |
|||
|
|||
input[type="submit"], button { |
|||
-webkit-appearance: none; |
|||
appearance: none; |
|||
} |
|||
|
|||
@media (max-width: 1024px) { |
|||
/* Basic */ |
|||
|
|||
html { |
|||
-webkit-text-size-adjust: 100%; |
|||
} |
|||
|
|||
td, th { |
|||
padding: 10px; |
|||
font-size: 0.875rem; |
|||
} |
|||
|
|||
.small { |
|||
font-size: 0.75rem; |
|||
} |
|||
|
|||
/* Layout */ |
|||
|
|||
#container { |
|||
min-width: 0; |
|||
} |
|||
|
|||
#content { |
|||
padding: 15px 20px 20px; |
|||
} |
|||
|
|||
div.breadcrumbs { |
|||
padding: 10px 30px; |
|||
} |
|||
|
|||
/* Header */ |
|||
|
|||
#header { |
|||
flex-direction: column; |
|||
padding: 15px 30px; |
|||
justify-content: flex-start; |
|||
} |
|||
|
|||
#branding h1 { |
|||
margin: 0 0 8px; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
#user-tools { |
|||
margin: 0; |
|||
font-weight: 400; |
|||
line-height: 1.85; |
|||
text-align: left; |
|||
} |
|||
|
|||
#user-tools a { |
|||
display: inline-block; |
|||
line-height: 1.4; |
|||
} |
|||
|
|||
/* Dashboard */ |
|||
|
|||
.dashboard #content { |
|||
width: auto; |
|||
} |
|||
|
|||
#content-related { |
|||
margin-right: -290px; |
|||
} |
|||
|
|||
.colSM #content-related { |
|||
margin-left: -290px; |
|||
} |
|||
|
|||
.colMS { |
|||
margin-right: 290px; |
|||
} |
|||
|
|||
.colSM { |
|||
margin-left: 290px; |
|||
} |
|||
|
|||
.dashboard .module table td a { |
|||
padding-right: 0; |
|||
} |
|||
|
|||
td .changelink, td .addlink { |
|||
font-size: 0.8125rem; |
|||
} |
|||
|
|||
/* Changelist */ |
|||
|
|||
#toolbar { |
|||
border: none; |
|||
padding: 15px; |
|||
} |
|||
|
|||
#changelist-search > div { |
|||
display: flex; |
|||
flex-wrap: nowrap; |
|||
max-width: 480px; |
|||
} |
|||
|
|||
#changelist-search label { |
|||
line-height: 1.375rem; |
|||
} |
|||
|
|||
#toolbar form #searchbar { |
|||
flex: 1 0 auto; |
|||
width: 0; |
|||
height: 1.375rem; |
|||
margin: 0 10px 0 6px; |
|||
} |
|||
|
|||
#toolbar form input[type=submit] { |
|||
flex: 0 1 auto; |
|||
} |
|||
|
|||
#changelist-search .quiet { |
|||
width: 0; |
|||
flex: 1 0 auto; |
|||
margin: 5px 0 0 25px; |
|||
} |
|||
|
|||
#changelist .actions { |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
padding: 15px 0; |
|||
} |
|||
|
|||
#changelist .actions label { |
|||
display: flex; |
|||
} |
|||
|
|||
#changelist .actions select { |
|||
background: var(--body-bg); |
|||
} |
|||
|
|||
#changelist .actions .button { |
|||
min-width: 48px; |
|||
margin: 0 10px; |
|||
} |
|||
|
|||
#changelist .actions span.all, |
|||
#changelist .actions span.clear, |
|||
#changelist .actions span.question, |
|||
#changelist .actions span.action-counter { |
|||
font-size: 0.6875rem; |
|||
margin: 0 10px 0 0; |
|||
} |
|||
|
|||
#changelist-filter { |
|||
flex-basis: 200px; |
|||
} |
|||
|
|||
.change-list .filtered .results, |
|||
.change-list .filtered .paginator, |
|||
.filtered #toolbar, |
|||
.filtered .actions, |
|||
|
|||
#changelist .paginator { |
|||
border-top-color: var(--hairline-color); /* XXX Is this used at all? */ |
|||
} |
|||
|
|||
#changelist .results + .paginator { |
|||
border-top: none; |
|||
} |
|||
|
|||
/* Forms */ |
|||
|
|||
label { |
|||
font-size: 0.875rem; |
|||
} |
|||
|
|||
.form-row input[type=text], |
|||
.form-row input[type=password], |
|||
.form-row input[type=email], |
|||
.form-row input[type=url], |
|||
.form-row input[type=tel], |
|||
.form-row input[type=number], |
|||
.form-row textarea, |
|||
.form-row select, |
|||
.form-row .vTextField { |
|||
box-sizing: border-box; |
|||
margin: 0; |
|||
padding: 6px 8px; |
|||
min-height: 2.25rem; |
|||
font-size: 0.875rem; |
|||
} |
|||
|
|||
.form-row select { |
|||
height: 2.25rem; |
|||
} |
|||
|
|||
.form-row select[multiple] { |
|||
height: auto; |
|||
min-height: 0; |
|||
} |
|||
|
|||
fieldset .fieldBox + .fieldBox { |
|||
margin-top: 10px; |
|||
padding-top: 10px; |
|||
border-top: 1px solid var(--hairline-color); |
|||
} |
|||
|
|||
textarea { |
|||
max-width: 100%; |
|||
max-height: 120px; |
|||
} |
|||
|
|||
.aligned label { |
|||
padding-top: 6px; |
|||
} |
|||
|
|||
.aligned .related-lookup, |
|||
.aligned .datetimeshortcuts, |
|||
.aligned .related-lookup + strong { |
|||
align-self: center; |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
form .aligned div.radiolist { |
|||
margin-left: 2px; |
|||
} |
|||
|
|||
.submit-row { |
|||
padding: 8px; |
|||
} |
|||
|
|||
.submit-row a.deletelink { |
|||
padding: 10px 7px; |
|||
} |
|||
|
|||
.button, input[type=submit], input[type=button], .submit-row input, a.button { |
|||
padding: 7px; |
|||
} |
|||
|
|||
/* Related widget */ |
|||
|
|||
.related-widget-wrapper { |
|||
float: none; |
|||
} |
|||
|
|||
.related-widget-wrapper-link + .selector { |
|||
max-width: calc(100% - 30px); |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
select + .related-widget-wrapper-link, |
|||
.related-widget-wrapper-link + .related-widget-wrapper-link { |
|||
margin-left: 10px; |
|||
} |
|||
|
|||
/* Selector */ |
|||
|
|||
.selector { |
|||
display: flex; |
|||
width: 100%; |
|||
} |
|||
|
|||
.selector .selector-filter { |
|||
display: flex; |
|||
align-items: center; |
|||
} |
|||
|
|||
.selector .selector-filter label { |
|||
margin: 0 8px 0 0; |
|||
} |
|||
|
|||
.selector .selector-filter input { |
|||
width: auto; |
|||
min-height: 0; |
|||
flex: 1 1; |
|||
} |
|||
|
|||
.selector-available, .selector-chosen { |
|||
width: auto; |
|||
flex: 1 1; |
|||
display: flex; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.selector select { |
|||
width: 100%; |
|||
flex: 1 0 auto; |
|||
margin-bottom: 5px; |
|||
} |
|||
|
|||
.selector ul.selector-chooser { |
|||
width: 26px; |
|||
height: 52px; |
|||
padding: 2px 0; |
|||
margin: auto 15px; |
|||
border-radius: 20px; |
|||
transform: translateY(-10px); |
|||
} |
|||
|
|||
.selector-add, .selector-remove { |
|||
width: 20px; |
|||
height: 20px; |
|||
background-size: 20px auto; |
|||
} |
|||
|
|||
.selector-add { |
|||
background-position: 0 -120px; |
|||
} |
|||
|
|||
.selector-remove { |
|||
background-position: 0 -80px; |
|||
} |
|||
|
|||
a.selector-chooseall, a.selector-clearall { |
|||
align-self: center; |
|||
} |
|||
|
|||
.stacked { |
|||
flex-direction: column; |
|||
max-width: 480px; |
|||
} |
|||
|
|||
.stacked > * { |
|||
flex: 0 1 auto; |
|||
} |
|||
|
|||
.stacked select { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
.stacked .selector-available, .stacked .selector-chosen { |
|||
width: auto; |
|||
} |
|||
|
|||
.stacked ul.selector-chooser { |
|||
width: 52px; |
|||
height: 26px; |
|||
padding: 0 2px; |
|||
margin: 15px auto; |
|||
transform: none; |
|||
} |
|||
|
|||
.stacked .selector-chooser li { |
|||
padding: 3px; |
|||
} |
|||
|
|||
.stacked .selector-add, .stacked .selector-remove { |
|||
background-size: 20px auto; |
|||
} |
|||
|
|||
.stacked .selector-add { |
|||
background-position: 0 -40px; |
|||
} |
|||
|
|||
.stacked .active.selector-add { |
|||
background-position: 0 -40px; |
|||
} |
|||
|
|||
.active.selector-add:focus, .active.selector-add:hover { |
|||
background-position: 0 -140px; |
|||
} |
|||
|
|||
.stacked .active.selector-add:focus, .stacked .active.selector-add:hover { |
|||
background-position: 0 -60px; |
|||
} |
|||
|
|||
.stacked .selector-remove { |
|||
background-position: 0 0; |
|||
} |
|||
|
|||
.stacked .active.selector-remove { |
|||
background-position: 0 0; |
|||
} |
|||
|
|||
.active.selector-remove:focus, .active.selector-remove:hover { |
|||
background-position: 0 -100px; |
|||
} |
|||
|
|||
.stacked .active.selector-remove:focus, .stacked .active.selector-remove:hover { |
|||
background-position: 0 -20px; |
|||
} |
|||
|
|||
.help-tooltip, .selector .help-icon { |
|||
display: none; |
|||
} |
|||
|
|||
.datetime input { |
|||
width: 50%; |
|||
max-width: 120px; |
|||
} |
|||
|
|||
.datetime span { |
|||
font-size: 0.8125rem; |
|||
} |
|||
|
|||
.datetime .timezonewarning { |
|||
display: block; |
|||
font-size: 0.6875rem; |
|||
color: var(--body-quiet-color); |
|||
} |
|||
|
|||
.datetimeshortcuts { |
|||
color: var(--border-color); /* XXX Redundant, .datetime span also sets #ccc */ |
|||
} |
|||
|
|||
.form-row .datetime input.vDateField, .form-row .datetime input.vTimeField { |
|||
width: 75%; |
|||
} |
|||
|
|||
.inline-group { |
|||
overflow: auto; |
|||
} |
|||
|
|||
/* Messages */ |
|||
|
|||
ul.messagelist li { |
|||
padding-left: 55px; |
|||
background-position: 30px 12px; |
|||
} |
|||
|
|||
ul.messagelist li.error { |
|||
background-position: 30px 12px; |
|||
} |
|||
|
|||
ul.messagelist li.warning { |
|||
background-position: 30px 14px; |
|||
} |
|||
|
|||
/* Login */ |
|||
|
|||
.login #header { |
|||
padding: 15px 20px; |
|||
} |
|||
|
|||
.login #branding h1 { |
|||
margin: 0; |
|||
} |
|||
|
|||
/* GIS */ |
|||
|
|||
div.olMap { |
|||
max-width: calc(100vw - 30px); |
|||
max-height: 300px; |
|||
} |
|||
|
|||
.olMap + .clear_features { |
|||
display: block; |
|||
margin-top: 10px; |
|||
} |
|||
|
|||
/* Docs */ |
|||
|
|||
.module table.xfull { |
|||
width: 100%; |
|||
} |
|||
|
|||
pre.literal-block { |
|||
overflow: auto; |
|||
} |
|||
} |
|||
|
|||
/* Mobile */ |
|||
|
|||
@media (max-width: 767px) { |
|||
/* Layout */ |
|||
|
|||
#header, #content, #footer { |
|||
padding: 15px; |
|||
} |
|||
|
|||
#footer:empty { |
|||
padding: 0; |
|||
} |
|||
|
|||
div.breadcrumbs { |
|||
padding: 10px 15px; |
|||
} |
|||
|
|||
/* Dashboard */ |
|||
|
|||
.colMS, .colSM { |
|||
margin: 0; |
|||
} |
|||
|
|||
#content-related, .colSM #content-related { |
|||
width: 100%; |
|||
margin: 0; |
|||
} |
|||
|
|||
#content-related .module { |
|||
margin-bottom: 0; |
|||
} |
|||
|
|||
#content-related .module h2 { |
|||
padding: 10px 15px; |
|||
font-size: 1rem; |
|||
} |
|||
|
|||
/* Changelist */ |
|||
|
|||
#changelist { |
|||
align-items: stretch; |
|||
flex-direction: column; |
|||
} |
|||
|
|||
#toolbar { |
|||
padding: 10px; |
|||
} |
|||
|
|||
#changelist-filter { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
#changelist .actions label { |
|||
flex: 1 1; |
|||
} |
|||
|
|||
#changelist .actions select { |
|||
flex: 1 0; |
|||
width: 100%; |
|||
} |
|||
|
|||
#changelist .actions span { |
|||
flex: 1 0 100%; |
|||
} |
|||
|
|||
#changelist-filter { |
|||
position: static; |
|||
width: auto; |
|||
margin-top: 30px; |
|||
} |
|||
|
|||
.object-tools { |
|||
float: none; |
|||
margin: 0 0 15px; |
|||
padding: 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.object-tools li { |
|||
height: auto; |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.object-tools li + li { |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
/* Forms */ |
|||
|
|||
.form-row { |
|||
padding: 15px 0; |
|||
} |
|||
|
|||
.aligned .form-row, |
|||
.aligned .form-row > div { |
|||
max-width: 100vw; |
|||
} |
|||
|
|||
.aligned .form-row > div { |
|||
width: calc(100vw - 30px); |
|||
} |
|||
|
|||
.flex-container { |
|||
flex-flow: column; |
|||
} |
|||
|
|||
textarea { |
|||
max-width: none; |
|||
} |
|||
|
|||
.vURLField { |
|||
width: auto; |
|||
} |
|||
|
|||
fieldset .fieldBox + .fieldBox { |
|||
margin-top: 15px; |
|||
padding-top: 15px; |
|||
} |
|||
|
|||
fieldset.collapsed .form-row { |
|||
display: none; |
|||
} |
|||
|
|||
.aligned label { |
|||
width: 100%; |
|||
padding: 0 0 10px; |
|||
} |
|||
|
|||
.aligned label:after { |
|||
max-height: 0; |
|||
} |
|||
|
|||
.aligned .form-row input, |
|||
.aligned .form-row select, |
|||
.aligned .form-row textarea { |
|||
flex: 1 1 auto; |
|||
max-width: 100%; |
|||
} |
|||
|
|||
.aligned .checkbox-row { |
|||
align-items: center; |
|||
} |
|||
|
|||
.aligned .checkbox-row input { |
|||
flex: 0 1 auto; |
|||
margin: 0; |
|||
} |
|||
|
|||
.aligned .vCheckboxLabel { |
|||
flex: 1 0; |
|||
padding: 1px 0 0 5px; |
|||
} |
|||
|
|||
.aligned label + p, |
|||
.aligned label + div.help, |
|||
.aligned label + div.readonly { |
|||
padding: 0; |
|||
margin-left: 0; |
|||
} |
|||
|
|||
.aligned p.file-upload { |
|||
font-size: 0.8125rem; |
|||
} |
|||
|
|||
span.clearable-file-input { |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
span.clearable-file-input label { |
|||
font-size: 0.8125rem; |
|||
padding-bottom: 0; |
|||
} |
|||
|
|||
.aligned .timezonewarning { |
|||
flex: 1 0 100%; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
form .aligned .form-row div.help { |
|||
width: 100%; |
|||
margin: 5px 0 0; |
|||
padding: 0; |
|||
} |
|||
|
|||
form .aligned ul, |
|||
form .aligned ul.errorlist { |
|||
margin-left: 0; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
form .aligned div.radiolist { |
|||
margin-top: 5px; |
|||
margin-right: 15px; |
|||
margin-bottom: -3px; |
|||
} |
|||
|
|||
form .aligned div.radiolist:not(.inline) div + div { |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
/* Related widget */ |
|||
|
|||
.related-widget-wrapper { |
|||
width: 100%; |
|||
display: flex; |
|||
align-items: flex-start; |
|||
} |
|||
|
|||
.related-widget-wrapper .selector { |
|||
order: 1; |
|||
} |
|||
|
|||
.related-widget-wrapper > a { |
|||
order: 2; |
|||
} |
|||
|
|||
.related-widget-wrapper .radiolist ~ a { |
|||
align-self: flex-end; |
|||
} |
|||
|
|||
.related-widget-wrapper > select ~ a { |
|||
align-self: center; |
|||
} |
|||
|
|||
select + .related-widget-wrapper-link, |
|||
.related-widget-wrapper-link + .related-widget-wrapper-link { |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
/* Selector */ |
|||
|
|||
.selector { |
|||
flex-direction: column; |
|||
} |
|||
|
|||
.selector > * { |
|||
float: none; |
|||
} |
|||
|
|||
.selector-available, .selector-chosen { |
|||
margin-bottom: 0; |
|||
flex: 1 1 auto; |
|||
} |
|||
|
|||
.selector select { |
|||
max-height: 96px; |
|||
} |
|||
|
|||
.selector ul.selector-chooser { |
|||
display: block; |
|||
float: none; |
|||
width: 52px; |
|||
height: 26px; |
|||
padding: 0 2px; |
|||
margin: 15px auto 20px; |
|||
transform: none; |
|||
} |
|||
|
|||
.selector ul.selector-chooser li { |
|||
float: left; |
|||
} |
|||
|
|||
.selector-remove { |
|||
background-position: 0 0; |
|||
} |
|||
|
|||
.active.selector-remove:focus, .active.selector-remove:hover { |
|||
background-position: 0 -20px; |
|||
} |
|||
|
|||
.selector-add { |
|||
background-position: 0 -40px; |
|||
} |
|||
|
|||
.active.selector-add:focus, .active.selector-add:hover { |
|||
background-position: 0 -60px; |
|||
} |
|||
|
|||
/* Inlines */ |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related { |
|||
border: 1px solid var(--hairline-color); |
|||
border-radius: 4px; |
|||
margin-top: 15px; |
|||
overflow: auto; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related > * { |
|||
box-sizing: border-box; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related .module { |
|||
padding: 0 10px; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row { |
|||
border-top: 1px solid var(--hairline-color); |
|||
border-bottom: none; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related .module .form-row:first-child { |
|||
border-top: none; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related h3 { |
|||
padding: 10px; |
|||
border-top-width: 0; |
|||
border-bottom-width: 2px; |
|||
display: flex; |
|||
flex-wrap: wrap; |
|||
align-items: center; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related h3 .inline_label { |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .inline-related h3 span.delete { |
|||
float: none; |
|||
flex: 1 1 100%; |
|||
margin-top: 5px; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .aligned .form-row > div:not([class]) { |
|||
width: 100%; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] .aligned label { |
|||
width: 100%; |
|||
} |
|||
|
|||
.inline-group[data-inline-type="stacked"] div.add-row { |
|||
margin-top: 15px; |
|||
border: 1px solid var(--hairline-color); |
|||
border-radius: 4px; |
|||
} |
|||
|
|||
.inline-group div.add-row, |
|||
.inline-group .tabular tr.add-row td { |
|||
padding: 0; |
|||
} |
|||
|
|||
.inline-group div.add-row a, |
|||
.inline-group .tabular tr.add-row td a { |
|||
display: block; |
|||
padding: 8px 10px 8px 26px; |
|||
background-position: 8px 9px; |
|||
} |
|||
|
|||
/* Submit row */ |
|||
|
|||
.submit-row { |
|||
padding: 10px; |
|||
margin: 0 0 15px; |
|||
flex-direction: column; |
|||
gap: 8px; |
|||
} |
|||
|
|||
.submit-row input, .submit-row input.default, .submit-row a { |
|||
text-align: center; |
|||
} |
|||
|
|||
.submit-row a.closelink { |
|||
padding: 10px 0; |
|||
text-align: center; |
|||
} |
|||
|
|||
.submit-row a.deletelink { |
|||
margin: 0; |
|||
} |
|||
|
|||
/* Messages */ |
|||
|
|||
ul.messagelist li { |
|||
padding-left: 40px; |
|||
background-position: 15px 12px; |
|||
} |
|||
|
|||
ul.messagelist li.error { |
|||
background-position: 15px 12px; |
|||
} |
|||
|
|||
ul.messagelist li.warning { |
|||
background-position: 15px 14px; |
|||
} |
|||
|
|||
/* Paginator */ |
|||
|
|||
.paginator .this-page, .paginator a:link, .paginator a:visited { |
|||
padding: 4px 10px; |
|||
} |
|||
|
|||
/* Login */ |
|||
|
|||
body.login { |
|||
padding: 0 15px; |
|||
} |
|||
|
|||
.login #container { |
|||
width: auto; |
|||
max-width: 480px; |
|||
margin: 50px auto; |
|||
} |
|||
|
|||
.login #header, |
|||
.login #content { |
|||
padding: 15px; |
|||
} |
|||
|
|||
.login #content-main { |
|||
float: none; |
|||
} |
|||
|
|||
.login .form-row { |
|||
padding: 0; |
|||
} |
|||
|
|||
.login .form-row + .form-row { |
|||
margin-top: 15px; |
|||
} |
|||
|
|||
.login .form-row label { |
|||
margin: 0 0 5px; |
|||
line-height: 1.2; |
|||
} |
|||
|
|||
.login .submit-row { |
|||
padding: 15px 0 0; |
|||
} |
|||
|
|||
.login br { |
|||
display: none; |
|||
} |
|||
|
|||
.login .submit-row input { |
|||
margin: 0; |
|||
text-transform: uppercase; |
|||
} |
|||
|
|||
.errornote { |
|||
margin: 0 0 20px; |
|||
padding: 8px 12px; |
|||
font-size: 0.8125rem; |
|||
} |
|||
|
|||
/* Calendar and clock */ |
|||
|
|||
.calendarbox, .clockbox { |
|||
position: fixed !important; |
|||
top: 50% !important; |
|||
left: 50% !important; |
|||
transform: translate(-50%, -50%); |
|||
margin: 0; |
|||
border: none; |
|||
overflow: visible; |
|||
} |
|||
|
|||
.calendarbox:before, .clockbox:before { |
|||
content: ''; |
|||
position: fixed; |
|||
top: 50%; |
|||
left: 50%; |
|||
width: 100vw; |
|||
height: 100vh; |
|||
background: rgba(0, 0, 0, 0.75); |
|||
transform: translate(-50%, -50%); |
|||
} |
|||
|
|||
.calendarbox > *, .clockbox > * { |
|||
position: relative; |
|||
z-index: 1; |
|||
} |
|||
|
|||
.calendarbox > div:first-child { |
|||
z-index: 2; |
|||
} |
|||
|
|||
.calendarbox .calendar, .clockbox h2 { |
|||
border-radius: 4px 4px 0 0; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.calendarbox .calendar-cancel, .clockbox .calendar-cancel { |
|||
border-radius: 0 0 4px 4px; |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.calendar-shortcuts { |
|||
padding: 10px 0; |
|||
font-size: 0.75rem; |
|||
line-height: 0.75rem; |
|||
} |
|||
|
|||
.calendar-shortcuts a { |
|||
margin: 0 4px; |
|||
} |
|||
|
|||
.timelist a { |
|||
background: var(--body-bg); |
|||
padding: 4px; |
|||
} |
|||
|
|||
.calendar-cancel { |
|||
padding: 8px 10px; |
|||
} |
|||
|
|||
.clockbox h2 { |
|||
padding: 8px 15px; |
|||
} |
|||
|
|||
.calendar caption { |
|||
padding: 10px; |
|||
} |
|||
|
|||
.calendarbox .calendarnav-previous, .calendarbox .calendarnav-next { |
|||
z-index: 1; |
|||
top: 10px; |
|||
} |
|||
|
|||
/* History */ |
|||
|
|||
table#change-history tbody th, table#change-history tbody td { |
|||
font-size: 0.8125rem; |
|||
word-break: break-word; |
|||
} |
|||
|
|||
table#change-history tbody th { |
|||
width: auto; |
|||
} |
|||
|
|||
/* Docs */ |
|||
|
|||
table.model tbody th, table.model tbody td { |
|||
font-size: 0.8125rem; |
|||
word-break: break-word; |
|||
} |
|||
} |
|||
@ -0,0 +1,81 @@ |
|||
/* TABLETS */ |
|||
|
|||
@media (max-width: 1024px) { |
|||
[dir="rtl"] .colMS { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
[dir="rtl"] #user-tools { |
|||
text-align: right; |
|||
} |
|||
|
|||
[dir="rtl"] #changelist .actions label { |
|||
padding-left: 10px; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
[dir="rtl"] #changelist .actions select { |
|||
margin-left: 0; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
[dir="rtl"] .change-list .filtered .results, |
|||
[dir="rtl"] .change-list .filtered .paginator, |
|||
[dir="rtl"] .filtered #toolbar, |
|||
[dir="rtl"] .filtered div.xfull, |
|||
[dir="rtl"] .filtered .actions, |
|||
[dir="rtl"] #changelist-filter { |
|||
margin-left: 0; |
|||
} |
|||
|
|||
[dir="rtl"] .inline-group ul.tools a.add, |
|||
[dir="rtl"] .inline-group div.add-row a, |
|||
[dir="rtl"] .inline-group .tabular tr.add-row td a { |
|||
padding: 8px 26px 8px 10px; |
|||
background-position: calc(100% - 8px) 9px; |
|||
} |
|||
|
|||
[dir="rtl"] .related-widget-wrapper-link + .selector { |
|||
margin-right: 0; |
|||
margin-left: 15px; |
|||
} |
|||
|
|||
[dir="rtl"] .selector .selector-filter label { |
|||
margin-right: 0; |
|||
margin-left: 8px; |
|||
} |
|||
|
|||
[dir="rtl"] .object-tools li { |
|||
float: right; |
|||
} |
|||
|
|||
[dir="rtl"] .object-tools li + li { |
|||
margin-left: 0; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
[dir="rtl"] .dashboard .module table td a { |
|||
padding-left: 0; |
|||
padding-right: 16px; |
|||
} |
|||
} |
|||
|
|||
/* MOBILE */ |
|||
|
|||
@media (max-width: 767px) { |
|||
[dir="rtl"] .aligned .related-lookup, |
|||
[dir="rtl"] .aligned .datetimeshortcuts { |
|||
margin-left: 0; |
|||
margin-right: 15px; |
|||
} |
|||
|
|||
[dir="rtl"] .aligned ul, |
|||
[dir="rtl"] form .aligned ul.errorlist { |
|||
margin-right: 0; |
|||
} |
|||
|
|||
[dir="rtl"] #changelist-filter { |
|||
margin-left: 0; |
|||
margin-right: 0; |
|||
} |
|||
} |
|||
@ -0,0 +1,288 @@ |
|||
/* GLOBAL */ |
|||
|
|||
th { |
|||
text-align: right; |
|||
} |
|||
|
|||
.module h2, .module caption { |
|||
text-align: right; |
|||
} |
|||
|
|||
.module ul, .module ol { |
|||
margin-left: 0; |
|||
margin-right: 1.5em; |
|||
} |
|||
|
|||
.viewlink, .addlink, .changelink { |
|||
padding-left: 0; |
|||
padding-right: 16px; |
|||
background-position: 100% 1px; |
|||
} |
|||
|
|||
.deletelink { |
|||
padding-left: 0; |
|||
padding-right: 16px; |
|||
background-position: 100% 1px; |
|||
} |
|||
|
|||
.object-tools { |
|||
float: left; |
|||
} |
|||
|
|||
thead th:first-child, |
|||
tfoot td:first-child { |
|||
border-left: none; |
|||
} |
|||
|
|||
/* LAYOUT */ |
|||
|
|||
#user-tools { |
|||
right: auto; |
|||
left: 0; |
|||
text-align: left; |
|||
} |
|||
|
|||
div.breadcrumbs { |
|||
text-align: right; |
|||
} |
|||
|
|||
#content-main { |
|||
float: right; |
|||
} |
|||
|
|||
#content-related { |
|||
float: left; |
|||
margin-left: -300px; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.colMS { |
|||
margin-left: 300px; |
|||
margin-right: 0; |
|||
} |
|||
|
|||
/* SORTABLE TABLES */ |
|||
|
|||
table thead th.sorted .sortoptions { |
|||
float: left; |
|||
} |
|||
|
|||
thead th.sorted .text { |
|||
padding-right: 0; |
|||
padding-left: 42px; |
|||
} |
|||
|
|||
/* dashboard styles */ |
|||
|
|||
.dashboard .module table td a { |
|||
padding-left: .6em; |
|||
padding-right: 16px; |
|||
} |
|||
|
|||
/* changelists styles */ |
|||
|
|||
.change-list .filtered table { |
|||
border-left: none; |
|||
border-right: 0px none; |
|||
} |
|||
|
|||
#changelist-filter { |
|||
border-left: none; |
|||
border-right: none; |
|||
margin-left: 0; |
|||
margin-right: 30px; |
|||
} |
|||
|
|||
#changelist-filter li.selected { |
|||
border-left: none; |
|||
padding-left: 10px; |
|||
margin-left: 0; |
|||
border-right: 5px solid var(--hairline-color); |
|||
padding-right: 10px; |
|||
margin-right: -15px; |
|||
} |
|||
|
|||
#changelist table tbody td:first-child, #changelist table tbody th:first-child { |
|||
border-right: none; |
|||
border-left: none; |
|||
} |
|||
|
|||
/* FORMS */ |
|||
|
|||
.aligned label { |
|||
padding: 0 0 3px 1em; |
|||
} |
|||
|
|||
.submit-row a.deletelink { |
|||
margin-left: 0; |
|||
margin-right: auto; |
|||
} |
|||
|
|||
.vDateField, .vTimeField { |
|||
margin-left: 2px; |
|||
} |
|||
|
|||
.aligned .form-row input { |
|||
margin-left: 5px; |
|||
} |
|||
|
|||
form .aligned ul { |
|||
margin-right: 163px; |
|||
padding-right: 10px; |
|||
margin-left: 0; |
|||
padding-left: 0; |
|||
} |
|||
|
|||
form ul.inline li { |
|||
float: right; |
|||
padding-right: 0; |
|||
padding-left: 7px; |
|||
} |
|||
|
|||
form .aligned p.help, |
|||
form .aligned div.help { |
|||
margin-right: 160px; |
|||
padding-right: 10px; |
|||
} |
|||
|
|||
form div.help ul, |
|||
form .aligned .checkbox-row + .help, |
|||
form .aligned p.date div.help.timezonewarning, |
|||
form .aligned p.datetime div.help.timezonewarning, |
|||
form .aligned p.time div.help.timezonewarning { |
|||
margin-right: 0; |
|||
padding-right: 0; |
|||
} |
|||
|
|||
form .wide p.help, form .wide div.help { |
|||
padding-left: 0; |
|||
padding-right: 50px; |
|||
} |
|||
|
|||
form .wide p, |
|||
form .wide ul.errorlist, |
|||
form .wide input + p.help, |
|||
form .wide input + div.help { |
|||
margin-right: 200px; |
|||
margin-left: 0px; |
|||
} |
|||
|
|||
.submit-row { |
|||
text-align: right; |
|||
} |
|||
|
|||
fieldset .fieldBox { |
|||
margin-left: 20px; |
|||
margin-right: 0; |
|||
} |
|||
|
|||
.errorlist li { |
|||
background-position: 100% 12px; |
|||
padding: 0; |
|||
} |
|||
|
|||
.errornote { |
|||
background-position: 100% 12px; |
|||
padding: 10px 12px; |
|||
} |
|||
|
|||
/* WIDGETS */ |
|||
|
|||
.calendarnav-previous { |
|||
top: 0; |
|||
left: auto; |
|||
right: 10px; |
|||
background: url(../img/calendar-icons.svg) 0 -30px no-repeat; |
|||
} |
|||
|
|||
.calendarbox .calendarnav-previous:focus, |
|||
.calendarbox .calendarnav-previous:hover { |
|||
background-position: 0 -45px; |
|||
} |
|||
|
|||
.calendarnav-next { |
|||
top: 0; |
|||
right: auto; |
|||
left: 10px; |
|||
background: url(../img/calendar-icons.svg) 0 0 no-repeat; |
|||
} |
|||
|
|||
.calendarbox .calendarnav-next:focus, |
|||
.calendarbox .calendarnav-next:hover { |
|||
background-position: 0 -15px; |
|||
} |
|||
|
|||
.calendar caption, .calendarbox h2 { |
|||
text-align: center; |
|||
} |
|||
|
|||
.selector { |
|||
float: right; |
|||
} |
|||
|
|||
.selector .selector-filter { |
|||
text-align: right; |
|||
} |
|||
|
|||
.selector-add { |
|||
background: url(../img/selector-icons.svg) 0 -64px no-repeat; |
|||
} |
|||
|
|||
.active.selector-add:focus, .active.selector-add:hover { |
|||
background-position: 0 -80px; |
|||
} |
|||
|
|||
.selector-remove { |
|||
background: url(../img/selector-icons.svg) 0 -96px no-repeat; |
|||
} |
|||
|
|||
.active.selector-remove:focus, .active.selector-remove:hover { |
|||
background-position: 0 -112px; |
|||
} |
|||
|
|||
a.selector-chooseall { |
|||
background: url(../img/selector-icons.svg) right -128px no-repeat; |
|||
} |
|||
|
|||
a.active.selector-chooseall:focus, a.active.selector-chooseall:hover { |
|||
background-position: 100% -144px; |
|||
} |
|||
|
|||
a.selector-clearall { |
|||
background: url(../img/selector-icons.svg) 0 -160px no-repeat; |
|||
} |
|||
|
|||
a.active.selector-clearall:focus, a.active.selector-clearall:hover { |
|||
background-position: 0 -176px; |
|||
} |
|||
|
|||
.inline-deletelink { |
|||
float: left; |
|||
} |
|||
|
|||
form .form-row p.datetime { |
|||
overflow: hidden; |
|||
} |
|||
|
|||
.related-widget-wrapper { |
|||
float: right; |
|||
} |
|||
|
|||
/* MISC */ |
|||
|
|||
.inline-related h2, .inline-group h2 { |
|||
text-align: right |
|||
} |
|||
|
|||
.inline-related h3 span.delete { |
|||
padding-right: 20px; |
|||
padding-left: inherit; |
|||
left: 10px; |
|||
right: inherit; |
|||
float:left; |
|||
} |
|||
|
|||
.inline-related h3 span.delete label { |
|||
margin-left: inherit; |
|||
margin-right: 2px; |
|||
} |
|||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue