Файловый менеджер - Редактировать - /home/easybachat/makranacity.com/public/assets/admin/front/css/base/base.css
Ðазад
/* ----------------------------------------- Variables CSS ----------------------------------------- */ :root { --font-heading: "Oswald", sans-serif; --font-body: "Roboto", sans-serif; --font-family-fontawesome: "Font Awesome 5 Pro"; --font-base: 16px; --font-sm: 14px; --font-xsm: 12px; --font-lg: 18px; --font-normal: 400; --font-medium: 500; --font-semi-bold: 600; --font-bold: 700; --color-primary: #EE1243; --color-red: #EB4C4C; --color-green: #00B67A; --color-blue: #0061DF; --color-cyan: #21C4DF; --color-pink: #FF7294; --color-purple: #6231F0; --color-yellow: #FFC107; --color-orange: #F59872; --color-white: #ffffff; --color-black: #000000; --color-dark: #0D0C1B; --color-medium: #7A7575; --color-light: #F5F5F5; --color-primary-rgb: 238, 18, 67; --color-red-rgb: 235, 76, 76; --color-green-rgb: 0, 182, 122; --color-blue-rgb: 0, 97, 223; --color-cyan-rgb: 33, 196, 223; --color-pink-rgb: 255, 114, 148; --color-purple-rgb: 98, 49, 240; --color-yellow-rgb: 253, 192, 64; --color-orange-rgb: 245, 152, 114; --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; --color-dark-rgb: 25, 27, 30; --color-medium-rgb: 141, 141, 141; --color-light-rgb: 242, 242, 242; --border-color: #e8e8e8; --bg-light: #F7F9FC; --bg-primary-light: rgba(var(--color-primary-rgb), .05); --bg-dark: var(--color-dark); --bg-dark-shade: #0C122D; --bg-gradient: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --shadow-md: 0 10px 30px -5px rgb(8, 0, 42, .08); --shadow-lg: 0 .5rem 3rem rgba(0, 0, 0, .155); --radius-sm: 5px; --radius-md: 10px; --radius-xl: 15px; --radius-lg: 20px; } /* margin CSS*/ .mb-10 { margin-bottom: 10px !important; } .mb-15 { margin-bottom: 15px !important; } .mb-20 { margin-bottom: 20px !important; } .mb-25 { margin-bottom: 25px !important; } .mb-30 { margin-bottom: 30px !important; } .mb-40 { margin-bottom: 40px !important; } .mb-50 { margin-bottom: 50px !important; } .mb-60 { margin-bottom: 60px; } .mb-75 { margin-bottom: 75px; } .mt-10 { margin-top: 10px !important; } .mt-15 { margin-top: 15px !important; } .mt-20 { margin-top: 20px !important; } .mt-25 { margin-top: 25px !important; } .mt-30 { margin-top: 30px !important; } .mt-40 { margin-top: 40px !important; } .mt-50 { margin-top: 50px !important; } /* Padding CSS*/ .pt-10 { padding-top: 10px !important; } .pt-20 { padding-top: 20px !important; } .pt-30 { padding-top: 30px !important; } .pt-40 { padding-top: 40px !important; } .pt-60 { padding-top: 60px !important; } .pt-70 { padding-top: 70px; } .pt-75 { padding-top: 75px; } .pt-90 { padding-top: 90px; } .pt-100 { padding-top: 100px; } .pb-10 { padding-bottom: 10px !important; } .pb-15 { padding-bottom: 15px !important; } .pb-20 { padding-bottom: 20px !important; } .pb-25 { padding-bottom: 25px !important; } .pb-30 { padding-bottom: 30px !important; } .pb-40 { padding-bottom: 40px !important; } .pb-45 { padding-bottom: 45px !important; } .pb-60 { padding-bottom: 60px !important; } .pb-70 { padding-bottom: 70px; } .pb-75 { padding-bottom: 75px; } .pb-100 { padding-bottom: 100px; } .px-60 { padding-inline: 60px; } .px-30 { padding-inline: 20px; } .ptb-100 { padding-top: 100px; padding-bottom: 100px; } .ptb-70 { padding-top: 70px; padding-bottom: 70px; } .ptb-60 { padding-top: 60px; padding-bottom: 60px; } .p-15 { padding: 15px !important; } .p-20 { padding: 20px !important; } .p-25 { padding: 25px !important; } .p-30 { padding: 30px !important; } .pb-0 { padding-bottom: 0 !important; } .spacer-x { margin-left: calc(-0.5 * var(--bs-gutter-x)); margin-right: calc(-0.5 * var(--bs-gutter-x)); } .spacer-x .swiper-slide { padding-left: calc(var(--bs-gutter-x) * 0.5); padding-right: calc(var(--bs-gutter-x) * 0.5); } /* Border */ .border, .border-top, .border-bottom, .border-end, .border-start { border-color: var(--border-color) !important; } .border-primary, .border-primary-top, .border-primary-bottom, .border-primary-end, .border-primary-start { border: 1px solid var(--color-primary) !important; } /* Border Radius */ .radius-0 { border-radius: 0 !important; } .radius-sm { border-radius: var(--radius-sm) !important; } .radius-md { border-radius: var(--radius-md) !important; } .radius-lg { border-radius: var(--radius-lg) !important; } .radius-xl { border-radius: var(--radius-xl) !important; } .opacity-65 { opacity: 0.65 !important; } .opacity-80 { opacity: 0.8 !important; } .opacity-90 { opacity: 0.9 !important; } .mw-75 { min-width: 75%; } :is(.lc-1, .lc-2, .lc-3) { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; } .lc-1 { -webkit-line-clamp: 1 !important; line-clamp: 1 !important; } .lc-2 { -webkit-line-clamp: 2 !important; line-clamp: 2 !important; } .lc-3 { -webkit-line-clamp: 3 !important; line-clamp: 3 !important; } /* Tooltip CSS */ .tooltip { --bs-tooltip-bg: var(--color-dark); --bs-tooltip-padding-x: 10px; --bs-tooltip-padding-y: 5px; --bs-tooltip-font-size: var(--font-xsm); } .no-animation { transform: none; animation: none; } /* Badge CSS */ .badge { padding: 8px 16px; font-size: var(--font-xsm); --bs-badge-font-weight: var(--font-medium); } .badge.bg-success { color: var(--color-green); background: rgba(var(--color-green-rgb), 0.2) !important; } .badge.bg-info { color: var(--color-blue); background: rgba(var(--color-blue-rgb), 0.2) !important; } .badge.bg-danger { color: var(--color-red); background: rgba(var(--color-red-rgb), 0.2) !important; } .badge.bg-warning { color: var(--color-yellow); background: rgba(var(--color-yellow), 0.2) !important; } /* Card CSS */ .card { border: none; border-radius: 10px; } .card .card-title { margin-bottom: 20px; } .card .card-text { color: var(--color-medium); } .overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-black); opacity: 0.4; z-index: -1; } .bg-shape { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; z-index: -1; } .hidden { overflow: hidden; display: none; visibility: hidden; } .progress { height: 10px; border-radius: 30px; } .progress .progress-bar { border-radius: 30px; background: var(--color-primary); } .click-show { position: relative; overflow: hidden; max-height: 100px; } .click-show.show { max-height: 100% !important; } .click-show.show::after { opacity: 0; } .read-more-btn { color: #1F1F26; cursor: pointer; margin-top: 8px; font-weight: var(--font-medium); } .shadow-md { box-shadow: var(--shadow-md); } .shadow-lg { box-shadow: var(--shadow-lg) !important; } ul.list-bullet { list-style-type: disc !important; } ul.list-bullet li { list-style-type: disc !important; } .modal .btn-close { position: absolute; top: 0; right: 0; width: 35px; height: 35px; line-height: 35px; padding: 0; opacity: 1; background: var(--color-red); color: var(--color-white); text-align: center; border-radius: 0 5px 0 5px; z-index: 1; } @media (min-width: 576px) { .fluid-left { -webkit-padding-start: calc((100vw - 540px) / 2); padding-inline-start: calc((100vw - 540px) / 2); -webkit-padding-end: calc((100vw - 540px) / 2); padding-inline-end: calc((100vw - 540px) / 2); } .fluid-right { -webkit-padding-start: calc((100vw - 540px) / 2); padding-inline-start: calc((100vw - 540px) / 2); -webkit-padding-end: calc((100vw - 540px) / 2); padding-inline-end: calc((100vw - 540px) / 2); } } @media (min-width: 768px) { .fluid-left { -webkit-padding-start: calc((100vw - 720px) / 2); padding-inline-start: calc((100vw - 720px) / 2); -webkit-padding-end: 0; padding-inline-end: 0; } .fluid-right { -webkit-padding-end: calc((100vw - 720px) / 2); padding-inline-end: calc((100vw - 720px) / 2); -webkit-padding-start: 0; padding-inline-start: 0; } } @media (min-width: 992px) { .img-left { -webkit-margin-start: -60px; margin-inline-start: -60px; } .img-right { -webkit-margin-end: -60px; margin-inline-end: -60px; } .fluid-left { -webkit-padding-start: calc((100vw - 960px) / 2); padding-inline-start: calc((100vw - 960px) / 2); -webkit-padding-end: 0; padding-inline-end: 0; } .fluid-right { -webkit-padding-end: calc((100vw - 960px) / 2); padding-inline-end: calc((100vw - 960px) / 2); -webkit-padding-start: 0; padding-inline-start: 0; } .position-lg-absolute { position: absolute !important; } .border-lg-end { -webkit-border-end: 1px solid var(--border-color) !important; border-inline-end: 1px solid var(--border-color) !important; } } @media (min-width: 1200px) { .img-left { -webkit-margin-start: -100px; margin-inline-start: -100px; } .img-right { -webkit-margin-end: -100px; margin-inline-end: -100px; } .fluid-left { -webkit-padding-start: calc((100vw - 1140px) / 2); padding-inline-start: calc((100vw - 1140px) / 2); } .fluid-right { -webkit-padding-end: calc((100vw - (1140px - var(--bs-gutter-x) * 0.5)) / 2); padding-inline-end: calc((100vw - (1140px - var(--bs-gutter-x) * 0.5)) / 2); } .w-lg-80 { width: 80%; } .w-lg-50 { width: 50%; } } @media (min-width: 1400px) { .fluid-left { -webkit-padding-start: calc((100vw - 1320px) / 2); padding-inline-start: calc((100vw - 1320px) / 2); } .fluid-right { -webkit-padding-end: calc((100vw - (1320px - var(--bs-gutter-x) * 0.5)) / 2); padding-inline-end: calc((100vw - (1320px - var(--bs-gutter-x) * 0.5)) / 2); } .col-xxl-5th { width: 20%; } } .bg-s-contain { background-repeat: no-repeat; background-size: contain !important; } .clients-avatar .client-img { z-index: 1; position: relative; } .clients-avatar img { max-width: 45px; border-radius: 50%; } .clients-avatar img:not(:first-child) { -webkit-margin-start: -16px; margin-inline-start: -16px; } .clients-avatar span { position: relative; width: 45px; height: 45px; text-align: center; line-height: 45px; border-radius: 50%; color: var(--color-dark); -webkit-margin-start: -16px; margin-inline-start: -16px; z-index: 2; background: var(--bg-light); } /* ----------------------------------------- Typography CSS ----------------------------------------- */ body { font-family: var(--font-body); font-size: var(--font-base); font-weight: var(--font-normal); color: var(--color-medium); overflow-x: hidden; } a { color: var(--color-dark); text-decoration: none; outline: 0 !important; transition: all 0.3s ease-out; } a:hover { color: var(--color-primary); } .color-primary a { color: inherit; } :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a { color: inherit; } :is(h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6) a:hover { color: var(--color-primary); } :focus { outline: 0 !important; box-shadow: none !important; } :is(h1, h2, h3, h4, .h1, .h2, .h3, .h4) { font-family: var(--font-heading); color: var(--color-dark); font-weight: var(--font-bold); line-height: 1.2; } :is(h5, h6, .h5, .h6) { font-family: var(--font-heading); color: var(--color-dark); font-weight: var(--font-semi-bold); } h1 { font-size: 62px; } h2, .h2 { font-size: 42px; } h3, .h3 { font-size: 32px; } h4, .h4 { font-size: 24px; } h5, .h5 { font-size: 20px; } h6, .h6 { font-size: 16px; } p { color: var(--color-medium); line-height: 1.8; } .text:last-child, .card-text:last-child { margin-bottom: 0 !important; } .font-lg { font-size: var(--font-lg) !important; } .font-sm { font-size: var(--font-sm) !important; } .font-xsm { font-size: var(--font-xsm) !important; } .font-medium { font-weight: var(--font-medium); } .font-bold { font-weight: var(--font-bold); } .text-gradient { background: var(--gradient-1); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-stroke { text-fill-color: transparent; -webkit-text-fill-color: transparent; -webkit-text-stroke: 1px var(--color-medium); } /* ----------------------------------------- Reset CSS ----------------------------------------- */ :focus { outline: none; } img { max-width: 100%; } .form-control:focus { box-shadow: none; } ul { padding: 0; } figure, blockquote, ul { margin-bottom: 0; } table, th, td { vertical-align: middle; } ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background-color: var(--color-light); } ::-webkit-scrollbar-thumb { border-radius: 30px; background: rgba(var(--color-dark-rgb), 0.2); } /* ----------------------------------------- Color CSS ----------------------------------------- */ /* Theme Color CSS */ /* Color CSS */ .color-primary { color: var(--color-primary) !important; } .color-white { color: var(--color-white) !important; } .color-light { color: var(--color-light) !important; } .color-dark { color: var(--color-dark) !important; } .color-medium { color: var(--color-medium) !important; } .color-secondary { color: var(--color-secondary) !important; } .color-blue { color: var(--color-blue) !important; } .color-green { color: var(--color-green) !important; } .color-red { color: var(--color-red) !important; } .color-yellow { color: var(--color-yellow) !important; } .color-purple { color: var(--color-primary) !important; } .color-orange { color: var(--color-orange) !important; } .bg-primary { background-color: var(--color-primary) !important; } .bg-primary-light { --bg-primary-light: rgba(var(--color-primary-rgb), .05); background-color: var(--bg-primary-light) !important; } .bg-secondary { background-color: var(--color-secondary) !important; } .bg-light { background-color: var(--bg-light) !important; } .bg-light-2 { background-color: var(--bg-light-2) !important; } .bg-dark { background-color: var(--color-dark) !important; } .bg-gradient { background: var(--gradient-1) !important; } .border-primary { border-color: var(--color-primary) !important; } /* ----------------------------------------- Button CSS ----------------------------------------- */ button, .btn { cursor: pointer; border: none; background: inherit; } button:focus, button:active, .btn:focus, .btn:active { outline: none; box-shadow: none; } .btn-primary { --bs-btn-focus-shadow-rgb: 0; --bs-btn-active-color: var(--color-white); --bs-btn-active-bg: var(--color-primary); --bs-btn-active-border-color: var(--color-primary); --bs-btn-active-shadow: unset; } .btn-secondary { --bs-btn-color: var(--color-primary); --bs-btn-bg: var(--color-white); --bs-btn-border-color: var(--color-primary); --bs-btn-focus-shadow-rgb: 0; --bs-btn-active-color: var(--color-primary); --bs-btn-active-bg: var(--color-white); --bs-btn-active-border-color: var(--color-primary); --bs-btn-active-shadow: unset; } button:hover, .btn:hover { outline: none; } .btn { position: relative; font-size: 16px; font-weight: 700; border-radius: 0; letter-spacing: 0.05em; font-weight: var(--font-medium); transition: all 0.3s ease-out; } .icon-start i { -webkit-margin-end: 5px; margin-inline-end: 5px; } .icon-end i { -webkit-margin-start: 5px; margin-inline-start: 5px; } .btn-lg { padding: 15px 34px; } .btn-md { padding: 10px 24px; font-size: var(--font-sm); } .btn-sm { padding: 6px 14px; font-size: var(--font-xsm); } .btn-primary { color: var(--color-white); border: 1px solid var(--color-primary); background-color: var(--color-primary); transition: background 0.3s ease-out; box-shadow: 0px 10px 30px rgba(var(--color-primary-rgb), 0.14); z-index: 1; } .btn-primary:hover { color: var(--color-primary); background-color: var(--color-white); border-color: var(--color-primary); } .btn-primary.fancy { margin-top: 6px; -webkit-margin-start: 6px; margin-inline-start: 6px; transform: translate(-6px, -6px); background: none; box-shadow: unset; transition: all 0.3s ease-out; } .btn-primary.fancy::before { position: absolute; content: ""; bottom: -6px; left: 6px; width: 100%; height: 66.6666666667%; background: var(--color-dark); transition: all 0.3s ease-out; z-index: -2; } .btn-primary.fancy::after { position: absolute; content: ""; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-primary); transition: all 0.3s ease-out; z-index: -1; } .btn-primary.fancy:hover { color: var(--color-white); transform: none; } .btn-primary.fancy:hover::before { bottom: 6px; height: 100%; left: -6px; } .btn-danger { border: 1px solid var(--color-red); background-color: var(--color-red); transition: background 0.3s ease-out; } .btn-danger:hover { border-color: var(--color-red); background-color: var(--color-red); } .btn-outline { border: 1px solid var(--color-primary); color: var(--color-primary); } .btn-outline:hover { color: var(--color-primary); } .btn-secondary { background-color: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-secondary:hover { background-color: var(--color-white); color: var(--color-primary); border: 1px solid var(--color-primary); } .btn-remove { padding: 0; width: 35px; height: 35px; line-height: 35px; padding: 0; background: rgba(var(--color-primary-rgb), 0.12) !important; color: var(--color-primary) !important; } .btn-text { line-height: 1; text-decoration: underline; } .btn-icon { display: inline-flex; justify-content: center; align-items: center; width: 40px; height: 40px; text-align: center; } .btn-icon:hover { color: var(--color-white); background-color: var(--color-primary); } .disabled { border: none; cursor: not-allowed !important; pointer-events: initial !important; } /* Video Btn CSS */ .video-btn { position: relative; width: 75px; height: 75px; padding: 0; font-size: 22px; display: flex; text-align: center; justify-content: center; align-items: center; border-radius: 50%; color: var(--color-white); background: var(--color-primary); } .video-btn:hover { background-color: var(--color-primary); color: var(--color-white); } .video-btn::after { content: ""; position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); animation: ripple 3s linear infinite; background: var(--color-primary); border-radius: 50%; z-index: -2; } .video-btn::before { content: ""; position: absolute; left: -8px; top: -8px; width: calc(100% + 16px); height: calc(100% + 16px); animation: ripple 3s 1s linear infinite; background: var(--color-primary); border-radius: 50%; z-index: -1; } .video-btn-sm { width: 45px; height: 45px; font-size: var(--font-sm); } /* ----------------------------------------- Form CSS ----------------------------------------- */ .form-control { border: 1px solid var(--border-color); border-radius: 5px; height: 55px; line-height: 55px; padding: 0 0 0 18px; font-size: 16px; } .form-control:focus { color: var(--color-dark); background-color: transparent; } :is(input:not([type=radio], [type=checkbox]), textarea, .nice-select):is(:focus, :visited, :focus-within, :focus-visible) { border-color: #86b7fe !important; } select.form-select { background-size: 8px !important; } textarea { height: auto; line-height: normal !important; padding-top: 18px; } textarea.form-control { min-height: 200px; padding-top: 15px; line-height: 1.2 !important; } ::-moz-placeholder { color: var(--color-medium) !important; } ::placeholder { color: var(--color-medium) !important; } .custom-radio .form-radio-label { position: relative; cursor: pointer; position: relative; cursor: pointer; padding: 0; vertical-align: middle; -webkit-padding-start: 20px; padding-inline-start: 20px; } .custom-radio .form-radio-label::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); height: 14px; width: 14px; border: 1px solid var(--color-primary); border-radius: 50%; } .custom-radio input[type=radio]:checked+.form-radio-label::after { opacity: 1; } .custom-radio input[type=radio]+.form-radio-label::after { content: ""; position: absolute; top: 50%; transform: translateY(-50%); left: 2px; opacity: 0; width: 10px; height: 10px; border-radius: 50%; background-color: var(--color-primary); transition: all 0.2s ease-out; } .custom-radio .input-radio { display: none; } .custom-checkbox .form-check-label { position: relative; cursor: pointer; position: relative; cursor: pointer; padding: 0; vertical-align: middle; -webkit-padding-start: 22px; padding-inline-start: 22px; } .custom-checkbox .form-check-label::before { position: absolute; content: ""; left: 0; top: 50%; transform: translateY(-50%); height: 15px; width: 15px; border: 1px solid var(--color-primary); border-radius: 2px; } .custom-checkbox input[type=checkbox]:checked+.form-check-label::after { opacity: 1; } .custom-checkbox input[type=checkbox]+.form-check-label::after { content: ""; width: 11px; position: absolute; top: 50%; left: 2px; opacity: 0; height: 5px; border-left: 2px solid var(--color-white); border-bottom: 2px solid var(--color-white); transform: translateY(-65%) rotate(-45deg); transition: all 0.2s ease-out; } .custom-checkbox .input-checkbox { display: none; } input[type=checkbox]:checked+.form-check-label::before, input[type=radio]:checked+.form-check-label::before { background-color: var(--color-primary); border-color: var(--color-primary); } input[type=checkbox]:checked+.form-check-label::after, input[type=radio]:checked+.form-check-label::after { opacity: 1; } .form-group, .input-group { position: relative; } .form-group.icon-end label, .input-group.icon-end label { position: absolute; right: 0; left: 0; top: 50%; width: 18px; font-size: var(--font-sm); -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: 10px; margin-inline-end: 10px; transform: translateY(-50%); } .form-group.icon-start .form-control, .input-group.icon-start .form-control { -webkit-padding-start: 44px; padding-inline-start: 44px; } .form-group.icon-start label, .form-group.icon-start .icon, .input-group.icon-start label, .input-group.icon-start .icon { position: absolute; right: 0; left: 0; top: 50%; width: 18px; font-size: var(--font-sm); -webkit-margin-end: auto; margin-inline-end: auto; -webkit-margin-start: 20px !important; margin-inline-start: 20px !important; transform: translateY(-50%); z-index: 1; } .form-inline .input-group { flex-wrap: nowrap; padding: 3px; background-color: rgba(255, 255, 255, 0.259); } .form-inline .input-group .form-control { height: auto; line-height: 1; border: none; padding: 15px 25px; background-color: transparent; } .show-password-field { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); cursor: pointer; } .show-password-field .show-icon { font-family: var(--font-family-fontawesome); font-style: normal; } .show-password-field .show-icon::before { content: "\f06e"; } .show-password-field .show-icon.show::before { content: "\f070"; } .search-form { display: flex; padding: 6px 5px 6px 15px; padding-inline-start: 15px; padding-inline-end: 5px; border: 1px solid var(--border-color); } .search-form .search-input { display: block; width: 100%; border: none; outline: 0; height: 40px; line-height: 40px; border-radius: 5px 0 0 5px; background: transparent; } .search-form .btn-search { text-align: center; height: 40px; width: 40px; line-height: 40px; color: var(--color-medium); background: var(--color-white); } /* ----------------------------------------- Lazyload CSS ----------------------------------------- */ .lazy-container { position: relative; overflow: hidden; display: table; table-layout: fixed; width: 100%; background-color: var(--color-light); z-index: 1; } .lazy-container::after { position: absolute; content: "\f03e"; font-family: "Font Awesome 5 Pro"; top: 0; left: 0; right: 0; bottom: 0; display: grid; place-items: center; font-size: 25px; color: var(--color-medium); z-index: -1; } .lazy-container img { position: absolute; top: 0; left: 0; width: 0px; height: 0px; max-width: 100%; min-width: 100%; max-height: 100%; min-height: 100%; -o-object-fit: cover; object-fit: cover; } .lazy-container img.lazy-load { filter: blur(5px); transition: filter 400ms; } .lazy-container img.lazyloaded { filter: blur(0); } .ratio::before { content: ""; display: block; padding-bottom: 56.25%; } .ratio.ratio-1-1::before { padding-bottom: 100%; } .ratio.ratio-1-2::before { padding-bottom: 114%; } .ratio.ratio-1-3::before { padding-bottom: 126.14%; } .ratio.ratio-2-3::before { padding-bottom: 66.67%; } .ratio.ratio-16-11::before { padding-bottom: 53.57%; } .ratio.ratio-16-8::before { padding-bottom: 50%; } .ratio.ratio-21-9::before { padding-bottom: 42.85%; } .ratio.ratio-21-8::before { padding-bottom: 38.0952380952%; } .ratio.ratio-5-3::before { padding-bottom: 60%; } .ratio.ratio-5-4::before { padding-bottom: 80%; } .ratio.ratio-4-3::before { padding-bottom: 133.3333333333%; } .ratio.ratio-3-4::before { padding-bottom: 75%; } .ratio.ratio-vertical::before { padding-bottom: 150%; } .blur-up { filter: blur(5px); transition: filter 400ms; } .lazyloaded.blur-up { filter: blur(0); } /* ----------------------------------------- Nice Select CSS ----------------------------------------- */ .nice-select { float: unset; } .nice-select:after { right: 0; left: 0; -webkit-margin-start: auto; margin-inline-start: auto; -webkit-margin-end: 0; margin-inline-end: 0; } .nice-select.form-control:after { -webkit-margin-end: 12px; margin-inline-end: 12px; } .nice-select .list { z-index: 777; } .nice-select .list::-webkit-scrollbar { width: 5px; } .nice-select .list::-webkit-scrollbar-track { background-color: var(--color-light); } .nice-select .list::-webkit-scrollbar-thumb { border-radius: 30px; background: rgba(var(--color-dark-rgb), 0.2); } .nice-select.open .list { width: 100%; opacity: 1; pointer-events: auto; font-weight: 500; font-size: 15px; padding-top: 10px; padding-bottom: 10px; } .nice-select .option { display: block; -webkit-border-start: 2px solid transparent; border-inline-start: 2px solid transparent; } .nice-select .option.selected { font-weight: 500; color: var(--color-primary) !important; border-color: var(--color-primary); } /* ----------------------------------------- Preloader CSS ----------------------------------------- */ #preLoader { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--color-white); display: flex; align-items: center; justify-content: center; flex-direction: column; z-index: 1000; } #preLoader .loader .road { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 200px; perspective: 10px; overflow: hidden; z-index: 1; } #preLoader .loader .icon { position: absolute; color: var(--color-primary); font-size: 30px; z-index: 1; animation: car 2s infinite linear reverse; } #preLoader .loader .line { height: 100px; width: 3px; margin-inline: 10px; background: #4f4f4f; transform: rotateX(10deg); } #preLoader .loader .line.center-line { position: relative; } #preLoader .loader .line.center-line:after { content: ""; position: absolute; width: 3px; height: 100%; background: #fff; background-size: 100% 10px; animation: road 120ms linear infinite; } @keyframes road { 100% { background: linear-gradient(to bottom, gray 50%, gray, #fff, #fff 50%); background-size: 100% 10px; } } @keyframes car { 0% { transform: translateX(0); } 25% { transform: translateX(-10%); } 75% { transform: translateX(10%); } 100% { transform: translateX(0); } } /* ----------------------------------------- Swiper Slider CSS ----------------------------------------- */ .swiper-slide { -webkit-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); } .swiper-wrapper { -webkit-transform-style: preserve-3d; } .swiper-pagination .swiper-pagination-bullet { width: 10px; height: 10px; border-radius: 30px; opacity: 1; background-color: var(--color-primary); opacity: 0.3; transition: all 0.3s ease-in-out; } .swiper-pagination .swiper-pagination-bullet-active, .swiper-pagination .swiper-pagination-bullet:hover { background: var(--color-primary); opacity: 1; } .swiper-pagination.btn-gradient .swiper-pagination-bullet { background: var(--bg-gradient); opacity: 0.5; } .swiper-pagination.btn-gradient .swiper-pagination-bullet-active { opacity: 1; } .swiper-horizontal>.swiper-pagination-bullets, .swiper-pagination-bullets.swiper-pagination-horizontal, .swiper-pagination-custom, .swiper-pagination-fraction { line-height: 1; bottom: 0; } .slider-navigation { z-index: 3; } .slider-navigation .slider-btn { width: 40px; height: 40px; text-align: center; border-radius: 5px; background: var(--color-primary); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); color: var(--color-white); font-size: 24px; border: 1px solid transparent; transition: all 0.3s ease-out; } .slider-navigation .slider-btn:last-child { -webkit-margin-start: 10px; margin-inline-start: 10px; } .slider-navigation .slider-btn i { transition: transform 0.3s ease-out; } .slider-navigation .slider-btn.btn-outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); } .slider-navigation .slider-btn.btn-outline:hover { color: var(--color-white); background: var(--color-primary); } .slider-navigation .slider-btn:disabled { cursor: not-allowed; } .slider-navigation.position-middle .slider-btn { position: absolute; top: 50%; width: 50px; height: 50px; transform: translateY(-50%); z-index: 4; background: rgba(var(--color-white-rgb), 0.2); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); } .slider-navigation.position-middle .slider-btn.slider-btn-prev { left: 0%; } .slider-navigation.position-middle .slider-btn.slider-btn-next { right: 0%; } .pagination-fraction .swiper-pagination-bullet { position: relative; width: auto; height: auto; border-radius: 0; margin: 0; margin-inline: 5px; padding-bottom: 5px; text-align: center; font-size: var(--font-lg); color: var(--color-medium); background: transparent; } .pagination-fraction .swiper-pagination-bullet::before { position: absolute; content: ""; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 5px; background: var(--color-primary); transform: scaleX(0); transition: transform 0.4s ease-out; } .pagination-fraction .swiper-pagination-bullet-active { color: var(--color-primary); } .pagination-fraction .swiper-pagination-bullet-active::before { transform: none; } .swiper-lazy { background-color: var(--color-light); } .swiper-lazy-loaded.blur-up { filter: blur(0); } /* ----------------------------------------- Nav Tabs CSS ----------------------------------------- */ .tabs-navigation::-webkit-scrollbar { height: 5px; } .tabs-navigation .nav { display: inline-flex; border: none; z-index: 1; position: relative; overflow: hidden; } .tabs-navigation .nav li { flex: 0 0 auto; } .tabs-navigation .nav .nav-link { color: var(--color-medium); font-weight: var(--font-medium); border: 2px solid transparent; margin: 0; z-index: 999; border-radius: 0; cursor: pointer; } .tabs-navigation .nav .nav-link:is(.active, :hover) { color: var(--color-white); background: var(--color-primary); border-radius: 0; } .tabs-navigation .nav .nav-item:not(:last-child, :first-child, .active) .nav-link { border-inline-start-color: var(--border-color); } .tabs-navigation .nav[data-hover=fancyHover] .nav-link:is(.active, :hover) { color: var(--color-medium); background: transparent !important; } .tabs-navigation .nav[data-hover=fancyHover] .nav-item:is(.active) .nav-link { color: var(--color-white); background: var(--color-primary) !important; } .tabs-navigation .nav[data-hover=fancyHover] .nav-item:is(.active) .nav-link:is(:hover) { background: transparent !important; } .tabs-navigation .target { position: absolute; background: var(--color-primary); z-index: -1; transform: translateX(-50%); transition: all 0.3s ease-in-out; } .tabs-navigation.tabs-navigation-2 { border-bottom: 3px solid var(--color-light); } .tabs-navigation.tabs-navigation-2 .nav { display: inline-flex; overflow: hidden; width: 100%; } .tabs-navigation.tabs-navigation-2 .nav .nav-link { border-radius: 0; padding: 12px 30px; border: none; border-bottom: 2px solid transparent; cursor: pointer; transition: all 0.4s ease-out; color: var(--color-dark); } .tabs-navigation.tabs-navigation-2 .nav .nav-link:is(.active, :hover) { color: var(--color-primary); background: buttonface; border-bottom-color: var(--primary-color); } .tabs-navigation.tabs-navigation-3 .nav .nav-link { border: 1px solid transparent; } .tabs-navigation.tabs-navigation-3 .nav .nav-item:not(:first-child) { -webkit-margin-start: 10px; margin-inline-start: 10px; } .tabs-navigation.tabs-navigation-3 .nav .nav-item:not(.active) .nav-link { border-color: var(--border-color); } .tab-pane.fade { transition: all 0.2s; transform: translateY(1rem); } .tab-pane.fade.show { transform: translateY(0rem); } /* ----------------------------------------- Go top CSS ----------------------------------------- */ .go-top { position: fixed; display: flex; align-items: center; justify-content: center; bottom: 3%; left: 3%; width: 45px; height: 45px; opacity: 0; cursor: pointer; text-decoration: none; color: var(--color-light); font-size: 28px; border-radius: 50%; background: var(--color-primary); transition: 0.4s; transform: translateY(15%); z-index: 100; } .go-top.active { opacity: 1; transform: none; } .go-top:hover { transform: translateY(-3px); } /* ----------------------------------------- Title CSS ----------------------------------------- */ .section-title .title { margin-bottom: 0; margin-top: -10px; } .section-title .title span { color: var(--color-primary); } .section-title .subtitle { display: inline-block; } .section-title.title-inline { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; } .section-title.title-center { text-align: center; } .section-title.title-center .subtitle { -webkit-padding-start: 0; padding-inline-start: 0; } .section-title.title-center .subtitle::before { content: none; } .section-title.title-center .title { max-width: 600px; text-align: center; margin-left: auto; margin-right: auto; } .content-title .subtitle { display: inline-block; } .content-title h2 { margin-bottom: 10px; margin-top: -10px; } .content-title h2 span { color: var(--color-primary); } .content-title p { margin-bottom: 0; } /* ----------------------------------------- Animation CSS ----------------------------------------- */ @keyframes pulse { from { transform: scale3d(1, 1, 1); } 50% { transform: scale3d(1.2, 1.2, 1.2); } to { transform: scale3d(1, 1, 1); } } @keyframes slideUp { 0% { opacity: 0; transform: translateY(10%); } 100% { opacity: 1; transform: translateY(0); } } @keyframes slideDown { from { opacity: 0; transform: translateY(-50%); } to { opacity: 1; transform: translateY(0); } } @keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } } @keyframes moveAround { 0% { transform: translate(0px, 0px) rotate(0deg); } 20% { transform: translate(73px, -1px) rotate(36deg); } 40% { transform: translate(141px, 72px) rotate(72deg); } 60% { transform: translate(83px, 122px) rotate(108deg); } 80% { transform: translate(-40px, 72px) rotate(144deg); } 100% { transform: translate(0px, 0px) rotate(0deg); } } @keyframes moveUpDown { 0% { transform: translateY(0); } 50% { transform: translateY(-20px); } 100% { transform: translateY(0); } } @keyframes moveLeftRight { 0% { transform: translateX(0); } 50% { transform: translateX(-20px); } 100% { transform: translateX(0); } } @keyframes ripple { 0% { opacity: 0.45; } 100% { opacity: 0; transform: scale(2); } } /* ----------------------------------------- Social Link CSS ----------------------------------------- */ .social-link a { display: inline-block; text-align: center; width: 36px; height: 36px; line-height: 36px; -webkit-margin-end: 10px; margin-inline-end: 10px; background-color: var(--color-primary); color: var(--color-white); } .social-link a:last-child { margin: 0; } .social-link a:hover { color: var(--color-white); background-color: var(--color-primary); } .social-link.style-2 a { border-radius: 50%; background-color: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); } /* ----------------------------------------- Cookiebar CSS ----------------------------------------- */ .cookie-bar { position: fixed; bottom: -100%; left: 0; width: 100%; background-color: var(--color-dark); padding: 20px 20px 0; transition: all 2s linear; z-index: 999; } .cookie-bar-inner { display: flex; align-items: center; justify-content: space-between; } .cookie-bar .btn:not(:last-child) { -webkit-margin-end: 10px; margin-inline-end: 10px; } .cookie-bar .btn::before { content: none; } .cookie-bar.show { bottom: 0; transition: all 2s linear; } /* ----------------------------------------- Price Range Slider CSS ----------------------------------------- */ .noUi-target { border: none; box-shadow: none; border-radius: 30px; height: 6px; background: rgba(var(--color-primary-rgb), 0.13); padding-inline-start: 8px; padding-inline-end: 7px; } .noUi-connect { background: var(--color-primary); } .noUi-horizontal .noUi-handle { width: 15px; height: 15px; right: -7.5px; top: -5px; border-radius: 50%; box-shadow: none; background: var(--color-white); border-width: 3px; border-color: var(--color-primary); cursor: grab; } .noUi-horizontal .noUi-handle::before, .noUi-horizontal .noUi-handle::after { content: none; } /* ----------------------------------------- Ratings CSS ----------------------------------------- */ .ratings { display: flex; align-items: center; flex-wrap: wrap; gap: 3px; } .ratings .rate { background-image: url(../../images/rate-star.png); background-position: 0 -13px; background-repeat: repeat-x; height: 13px; width: 95px; -webkit-margin-start: -2px; margin-inline-start: -2px; } .ratings .rating-icon { background-image: url(../../images/rate-star.png); background-position: 0 0; background-repeat: repeat-x; height: 13px; } .ratings .ratings-total { font-size: 12px; line-height: 1; } .click-show { position: relative; overflow: hidden; max-height: 70px !important; } .click-show.show { max-height: 100% !important; } .click-show.show::after { opacity: 0; } .read-more-btn { color: var(--color-dark); cursor: pointer; margin-top: 8px; font-weight: var(--font-medium); } .dropdown-menu { text-align: start; }
| ver. 1.4 |
Github
|
.
| PHP 8.2.29 | Ð“ÐµÐ½ÐµÑ€Ð°Ñ†Ð¸Ñ Ñтраницы: 0.6 |
proxy
|
phpinfo
|
ÐаÑтройка