File manager - Edit - /home/asiatechinc/public_html/asiatech-websites/hotelkarmainn.in/css/panels.css
Back
/* -------------------------------- Primary style -------------------------------- */ html * { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } *, *:after, *:before { -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } body { /* prevent ie from showing the horizontal scrollbar */ overflow-x: hidden; } body.overflow-hidden { /* when author bio is visible, the out-of-focus content won't scroll */ overflow: hidden; } /* -------------------------------- Modules - reusable parts of our design -------------------------------- */ .avaraPanel-container { /* this class is used to give a max-width to the element it is applied to, and center it horizontally when it reaches that max-width */ width: 90%; max-width: 1200px; margin: 0 auto; } .avaraPanel-container::after { /* clearfix */ content: ''; display: table; clear: both; } /* -------------------------------- Main components -------------------------------- */ main { position: relative; z-index: 2; -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } main.slide-out { /* the main element slides to the left when the author bio is visible */ -webkit-transform: translateX(-270px); -moz-transform: translateX(-270px); -ms-transform: translateX(-270px); -o-transform: translateX(-270px); transform: translateX(-270px); } main.slide-out .avaraPanel-overlay { /* the overlay layer gets visible when the author bio slides in */ display: block; -webkit-animation: avaraPanel-fade-in 0.3s; -moz-animation: avaraPanel-fade-in 0.3s; animation: avaraPanel-fade-in 0.3s; } @media only screen and (min-width: 768px) { main.slide-out { /* change in size of the author bio section */ -webkit-transform: translateX(-600px); -moz-transform: translateX(-600px); -ms-transform: translateX(-600px); -o-transform: translateX(-600px); transform: translateX(-600px); } } @media only screen and (min-width: 1200px) { main.slide-out { -webkit-transform: translateX(-800px); -moz-transform: translateX(-800px); -ms-transform: translateX(-800px); -o-transform: translateX(-800px); transform: translateX(-800px); } } .avaraPanel-section { padding: 2em 0; text-align: center; } .avaraPanel-section .avaraPanel-container { /* this modifies the .avaraPanel-container default max-width */ max-width: 768px; } .avaraPanel-section h2 { font-family: 'Lato', sans-serif; font-weight: bold; text-transform: uppercase; margin-bottom: 1em; font-size: 20px; font-size: 1.25rem; } .avaraPanel-section p { line-height: 1.4; } @media only screen and (min-width: 768px) { .avaraPanel-section { padding: 4em; } .avaraPanel-section p { line-height: 1.6; } } @media only screen and (min-width: 1200px) { .avaraPanel-section { padding: 6em; } .avaraPanel-section h2 { margin-bottom: 2em; } .avaraPanel-section p { line-height: 1.8; font-size: 18px; font-size: 1.125rem; } } #avaraPanel-team .avaraPanel-container { max-width: 1200px; } #avaraPanel-team li { margin-bottom: 2em; border-radius: 0.25em; box-shadow: 0 0 10px rgba(92, 75, 81, 0); -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; } .no-touch #avaraPanel-team li:hover { box-shadow: 0 0 10px rgba(92, 75, 81, 0.3); } .no-touch #avaraPanel-team li:hover .avaraPanel-img-overlay { opacity: 1; } #avaraPanel-team .avaraPanel-img-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(92, 75, 81, 0.9); opacity: 0; border-radius: 0; -webkit-transition: opacity 0.3s; -moz-transition: opacity 0.3s; transition: opacity 0.3s; } #avaraPanel-team .avaraPanel-img-overlay span { position: absolute; left: 50%; top: 50%; bottom: auto; right: auto; -webkit-transform: translateX(-50%) translateY(-50%); -moz-transform: translateX(-50%) translateY(-50%); -ms-transform: translateX(-50%) translateY(-50%); -o-transform: translateX(-50%) translateY(-50%); transform: translateX(-50%) translateY(-50%); color: #FFF; } #avaraPanel-team .avaraPanel-activity-info { height: 80px; background: #FFF; text-align: center; font-family: 'Lato', sans-serif; font-weight: bold; padding-top: 20px; border-radius: 0 0 .25em .25em; } #avaraPanel-team .avaraPanel-activity-info span { display: block; font-family: 'Lato', sans-serif; font-weight: normal; color: #999999; font-size: 14px; font-size: 0.875rem; margin-top: .5em; } @media only screen and (min-width: 768px) { #avaraPanel-team li { width: 31%; float: left; margin-right: 3.5%; } #avaraPanel-team li:nth-child(3n) { margin-right: 0; } } .avaraPanel-activity-bio { position: fixed; top: 0; right: 0; width: 270px; height: 100%; overflow-y: auto; /* smooth scrolling on mobile phones and tablets */ -webkit-overflow-scrolling: touch; background: #212121; z-index: 1; /* this how we move the author bio section off the canvas */ -webkit-transform: translateX(270px); -moz-transform: translateX(270px); -ms-transform: translateX(270px); -o-transform: translateX(270px); transform: translateX(270px); -webkit-transition-property: -webkit-transform; -moz-transition-property: -moz-transform; transition-property: transform; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; transition-duration: 0.3s; } .avaraPanel-activity-bio.slide-in { /* the author bio section slides in when the user clicks on the team activity picture */ -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } .avaraPanel-activity-bio .avaraPanel-activity-bio-pict { position: relative; } .avaraPanel-activity-bio .avaraPanel-activity-bio-pict::after { /* gradient at the bottom of the image - same color of the background of the section */ content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; background: -webkit-linear-gradient( bottom , #212121, rgba(33, 33, 33, 0)); background: linear-gradient(to top, #212121, rgba(33, 33, 33, 0)); } .no-cssgradients .avaraPanel-activity-bio .avaraPanel-activity-bio-pict::after { display: none; } .avaraPanel-activity-bio img { width: 100%; display: block; } .avaraPanel-activity-bio .avaraPanel-bio-content { padding: 1em; color: #FFF; } .avaraPanel-activity-bio .avaraPanel-bio-content h1 { font-family: 'Lato', sans-serif; font-weight: bold; text-transform: uppercase; text-align: center; font-size: 20px; font-size: 1.25rem; } .avaraPanel-activity-bio .avaraPanel-bio-content p { font-size: 14px; font-size: 0.875rem; margin: 1em 0; line-height: 1.4; color: #d7cfd2; } @media only screen and (min-width: 768px) { .avaraPanel-activity-bio { width: 600px; -webkit-transform: translateX(600px); -moz-transform: translateX(600px); -ms-transform: translateX(600px); -o-transform: translateX(600px); transform: translateX(600px); } .avaraPanel-activity-bio .avaraPanel-bio-content { padding: 2em; } .avaraPanel-activity-bio .avaraPanel-bio-content p { line-height: 1.6; margin: 2em 0; } } @media only screen and (min-width: 1200px) { .avaraPanel-activity-bio { width: 800px; -webkit-transform: translateX(800px); -moz-transform: translateX(800px); -ms-transform: translateX(800px); -o-transform: translateX(800px); transform: translateX(800px); } .avaraPanel-activity-bio .avaraPanel-activity-bio-pict::after { height: 150px; } .avaraPanel-activity-bio .avaraPanel-bio-content { padding: 4em; /* we move the content up so the title is over the color gradient */ -webkit-transform: translateY(-80px); -moz-transform: translateY(-80px); -ms-transform: translateY(-80px); -o-transform: translateY(-80px); transform: translateY(-80px); } .avaraPanel-activity-bio .avaraPanel-bio-content h1 { font-size: 40px; font-size: 2.5rem; } .avaraPanel-activity-bio .avaraPanel-bio-content p { font-size: 16px; font-size: 1.2rem; } .no-cssgradients .avaraPanel-activity-bio .avaraPanel-bio-content { -webkit-transform: translateY(0); -moz-transform: translateY(0); -ms-transform: translateY(0); -o-transform: translateY(0); transform: translateY(0); } } .avaraPanel-activity-bio-close { color:#2aa5ab; width: 32px; height: 32px; padding:40px; overflow: hidden; position: fixed; top:79px; right:0px !important; background: url("../images/avaraPanel-icon-close.svg") no-repeat center center; background-color:#2aa5ab; text-indent: -99999px; white-space: nowrap; z-index: 99999; display: none; } .avaraPanel-activity-bio-close.is-visible { display: block; -webkit-animation: avaraPanel-move-in 0.8s; -moz-animation: avaraPanel-move-in 0.8s; animation: avaraPanel-move-in 0.8s; } @media only screen and (min-width: 1200px) { /*.avaraPanel-activity-bio-close { right: 20px; top: 20px; }*/ } .avaraPanel-overlay { position: absolute; top:-100%; left: 0; width: 100%; height: 300%; background: rgba(138, 190, 178, 0.8); cursor: pointer; display: none; z-index:99999 !important; /*height: 100%; top: 0;*/ /*Did not cover all areas*/ } /* -------------------------------- xkeyframes -------------------------------- */ @-webkit-keyframes avaraPanel-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-moz-keyframes avaraPanel-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes avaraPanel-fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes avaraPanel-move-in { 0% { -webkit-transform: translateX(100px); } 100% { -webkit-transform: translateX(0); } } @-moz-keyframes avaraPanel-move-in { 0% { -moz-transform: translateX(100px); } 100% { -moz-transform: translateX(0); } } @keyframes avaraPanel-move-in { 0% { -webkit-transform: translateX(100px); -moz-transform: translateX(100px); -ms-transform: translateX(100px); -o-transform: translateX(100px); transform: translateX(100px); } 100% { -webkit-transform: translateX(0); -moz-transform: translateX(0); -ms-transform: translateX(0); -o-transform: translateX(0); transform: translateX(0); } }
| ver. 1.4 |
Github
|
.
| PHP 7.4.33 | Generation time: 0.02 |
proxy
|
phpinfo
|
Settings