907 lines
16 KiB
SCSS
907 lines
16 KiB
SCSS
:root{
|
|
/*
|
|
--bs-font-headings: 'Inter', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";*/
|
|
--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.9);
|
|
//font-feature-settings: "calt", "cv10", "cv11", "liga", "ss01", "ss03";
|
|
}
|
|
|
|
.screen-reader-text {
|
|
border: 0;
|
|
clip: rect(1px, 1px, 1px, 1px);
|
|
-webkit-clip-path: inset(50%);
|
|
clip-path: inset(50%);
|
|
height: 1px;
|
|
margin: -1px;
|
|
overflow: hidden;
|
|
padding: 0;
|
|
position: absolute !important;
|
|
width: 1px;
|
|
word-wrap: normal !important;
|
|
word-break: normal;
|
|
}
|
|
|
|
|
|
$container-max-widths: (
|
|
sm: 540px,
|
|
md: 720px,
|
|
lg: 960px,
|
|
xl: 1140px,
|
|
);
|
|
/*
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family:var(--bs-font-headings);
|
|
}
|
|
*/
|
|
|
|
body {
|
|
font-smoothing: antialiased;
|
|
-moz-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
-webkit-font-smoothing: antialiased;
|
|
-webkit-font-smoothing: subpixel-antialiased;
|
|
}
|
|
|
|
main#site-content {
|
|
margin-top:1rem;
|
|
margin-bottom:4rem;
|
|
}
|
|
|
|
a {
|
|
text-decoration:none;
|
|
}
|
|
/*
|
|
img {
|
|
max-width:100%;
|
|
}
|
|
*/
|
|
|
|
b, strong {
|
|
font-weight:600;
|
|
}
|
|
|
|
.sidebar-sticky {
|
|
position: -webkit-sticky;
|
|
position: sticky;
|
|
top:2rem;
|
|
}
|
|
|
|
|
|
.categories-widget,
|
|
//.tags-widget
|
|
.archives-widget {
|
|
ul {
|
|
list-style:none;
|
|
column-count: 2;
|
|
padding-left:0.5rem;
|
|
}
|
|
}
|
|
|
|
.archives-widget {
|
|
ul {
|
|
column-count: 2;
|
|
}
|
|
}
|
|
|
|
.tags-widget {
|
|
ul {
|
|
column-count: unset;
|
|
}
|
|
}
|
|
|
|
body {
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizelegibility;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
input {
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizelegibility;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
textarea {
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizelegibility;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
}
|
|
/*
|
|
.home {
|
|
.header {
|
|
border: none;
|
|
margin: none;
|
|
background: #fff;
|
|
nav {
|
|
border: none;
|
|
background: #fff;
|
|
}
|
|
}
|
|
footer {
|
|
margin: 0;
|
|
}
|
|
}
|
|
*/
|
|
footer {
|
|
[data-v-site-logo], [data-v-site-logo-dark] {
|
|
max-height:100px;
|
|
}
|
|
}
|
|
|
|
.navbar-nav {
|
|
align-items: baseline;
|
|
}
|
|
|
|
.navbar-light {
|
|
.navbar-nav {
|
|
.active {
|
|
>.nav-link {
|
|
color: var(--bs-blue);
|
|
}
|
|
}
|
|
}
|
|
.navbar-toggler {
|
|
box-shadow: 0px 0px 2px 1px rgba(var(--bs-body-color-rgb),0.07);
|
|
}
|
|
}
|
|
h2 {
|
|
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
#screen {
|
|
height: 500px;
|
|
overflow: hidden;
|
|
margin: 0px auto;
|
|
}
|
|
|
|
label {
|
|
|
|
}
|
|
|
|
.btn-shadow {
|
|
box-shadow: 0 4px 4px rgba(var(--bs-body-color-rgb), 0.08), 0 1px 2px rgba(var(--bs-body-color-rgb), 0.2), inset 0 6px 12px rgba(var(--bs-body-bg-rgb), 0.12), inset 0 1px 1px rgba(var(--bs-body-bg-rgb), 0.2);
|
|
}
|
|
|
|
@media screen and (max-width: 767px) {
|
|
.header {
|
|
nav.navbar-expand-md {
|
|
a.nav-link {
|
|
font-size: 21px;
|
|
}
|
|
}
|
|
nav {
|
|
padding: 2rem 2rem 0rem;
|
|
}
|
|
}
|
|
.navbar-collapse.collapse.show {
|
|
height: 100%;
|
|
}
|
|
h1 {
|
|
margin: 0px;
|
|
font-size: 35px;
|
|
line-height: 49px;
|
|
}
|
|
h2 {
|
|
font-size: 21px;
|
|
line-height: 42px;
|
|
max-width: auto;
|
|
}
|
|
.hero {
|
|
.btn {
|
|
min-width: 300px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
.dropdown {
|
|
min-width: 300px;
|
|
width: 100%;
|
|
}
|
|
.dropdown-menu {
|
|
min-width: 300px;
|
|
width: 100%;
|
|
}
|
|
}
|
|
|
|
|
|
|
|
.separator {
|
|
|
|
z-index:2;
|
|
position:absolute;
|
|
//width:100%;
|
|
//height:200px;
|
|
|
|
/*svg, */img {
|
|
width:100%;
|
|
height:100%;
|
|
}
|
|
|
|
&.bottom {
|
|
bottom:0;
|
|
}
|
|
|
|
}
|
|
|
|
.section {
|
|
position: relative;
|
|
width: 100%;
|
|
/* margin: 0; */
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.section-overlap {
|
|
margin-top: -33vh;
|
|
padding:15rem 0 10rem;
|
|
}
|
|
|
|
/*
|
|
::selection {
|
|
background: rgba(65, 155, 249, 0.14);
|
|
}
|
|
*/
|
|
|
|
#vvveb-admin + nav,
|
|
#vvveb-admin + header {
|
|
margin-top:35px;
|
|
}
|
|
|
|
.frame, .video {
|
|
background:#f5f9ff;
|
|
background:var(--bs-tertiary-bg);
|
|
box-shadow: 0 0 1px 0 rgba(var(--bs-body-color-rgb),.2),0 3px 4px 0 rgba(87,87,87,.1),0 10px 15px 0 rgba(5,4,10,.06);
|
|
border-radius: 10px;
|
|
width: 100%;
|
|
//overflow: hidden;
|
|
position: relative;
|
|
margin:3rem 0 3rem;
|
|
max-width:1280px;
|
|
padding:2.1rem 0 0;
|
|
z-index:2;
|
|
}
|
|
|
|
.video {
|
|
img {
|
|
border-top:1px solid var(--bs-border-color);
|
|
image-rendering: optimizequality;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
}
|
|
}
|
|
|
|
.frame {
|
|
background:#f5f9ff;
|
|
background:var(--bs-gray-700);
|
|
box-shadow: 0 0 1px 0 rgba(var(--bs-body-color-rgb),.2),0 3px 4px 0 rgba(87,87,87,.1),0 10px 15px 0 rgba(5,4,10,.06), rgba(var(--bs-body-color-rgb),.2) 0px 4px 14px 0px;
|
|
border-radius: 10px;
|
|
padding:2.1rem 0 0;
|
|
width: 100%;
|
|
//width: fit-content;
|
|
|
|
video {
|
|
//border-top:1px solid var(--bs-border-color);
|
|
display:block;
|
|
width: 100%;
|
|
//width: fit-content;
|
|
object-fit: initial;
|
|
max-width: 100%;
|
|
}
|
|
}
|
|
|
|
@media (min-width: 961px) {
|
|
.frame:before {
|
|
background-size: 100%;
|
|
top: 12px;
|
|
left: 10px;
|
|
}
|
|
}
|
|
.frame:before, .video:before {
|
|
content: '';
|
|
background: url(../img/browser-buttons.svg) no-repeat;
|
|
width: 42px;
|
|
height: 10px;
|
|
display: block;
|
|
position: absolute;
|
|
top: 16px;
|
|
left: 16px;
|
|
padding: 0;
|
|
margin: 0;
|
|
background-size: 60%;
|
|
}
|
|
|
|
.frame.play {
|
|
//background:#eff0f5;
|
|
}
|
|
|
|
@media screen and (min-width: 767px) {
|
|
.row .frame, .row .video {
|
|
//max-width:70%;
|
|
}
|
|
}
|
|
|
|
.box {
|
|
background: #ffffff;
|
|
padding: 3.75rem 2.5rem;
|
|
overflow: hidden;
|
|
color: #444444;
|
|
border-radius: 0.25rem;
|
|
box-shadow: 0 0.3125rem 0.875rem 0 rgba(129, 129, 129, 0.2) !important;
|
|
}
|
|
|
|
/*
|
|
.navbar {
|
|
--bs-navbar-color:rgba(var(--bs-emphasis-color-rgb), 0.8);
|
|
}
|
|
*/
|
|
|
|
.alert-top
|
|
{
|
|
position: absolute;
|
|
position: fixed;
|
|
top: 50px;
|
|
right:15px;
|
|
//min-width: 25%;
|
|
/*background:rgba(var(--bs-body-bg-rgb), 0.90);*/
|
|
border:1px solid var(--bs-border-color);
|
|
box-shadow: 0 0.3125rem 0.875rem 0 rgba(129, 129, 129, 0.2);
|
|
z-index:10000;
|
|
|
|
button
|
|
{
|
|
//height:100%;
|
|
}
|
|
}
|
|
|
|
|
|
.alert img
|
|
{
|
|
max-width:70px;
|
|
}
|
|
|
|
|
|
.login-box, .cart-box {
|
|
font-size:14px;
|
|
min-width:320px;
|
|
|
|
.form-label {
|
|
//font-weight:500;
|
|
}
|
|
}
|
|
|
|
.navbar-dark {
|
|
.user-box img, .cart-info img{
|
|
filter: invert(.7);
|
|
}
|
|
}
|
|
|
|
|
|
|
|
/*
|
|
.nav-link.dropdown-toggle::after
|
|
{
|
|
background: $custom-select-indicator no-repeat right center;
|
|
width: 8px !important;
|
|
height: 8px !important;
|
|
border:none !important;
|
|
vertical-align:0em !important;
|
|
}
|
|
*/
|
|
|
|
.dropdown-toggle::after {
|
|
border:none;
|
|
font-family: "Line Awesome Free";
|
|
font-weight: 900;
|
|
font-size: 80%;
|
|
content: "\f107";
|
|
vertical-align:middle;
|
|
}
|
|
|
|
.top-nav {
|
|
font-size:75%;
|
|
padding:0.3rem;
|
|
background-color: var(--bs-body-bg);
|
|
background-color: rgba(var(--bs-tertiary-bg-rgb),0.5);
|
|
//background-color: rgba(var(--light-bg-rgb), 0.5);
|
|
border-bottom:1px solid rgba(var(--bs-body-color-rgb),0.05);
|
|
//color:$gray-600;
|
|
|
|
ul, ol {
|
|
margin:0;
|
|
}
|
|
|
|
a {
|
|
color:rgba(var(--bs-body-color-rgb),0.8);
|
|
display:block;
|
|
}
|
|
|
|
i {
|
|
color:rgba(var(--bs-body-color-rgb),0.8);
|
|
}
|
|
}
|
|
|
|
|
|
audio, video {
|
|
max-width:100%;
|
|
//width:100%;
|
|
}
|
|
|
|
.alert-info {
|
|
background-color: rgba(var(--bs-info-bg-rgb), .07);
|
|
//background-color: var(--bs-info-bg-subtle);
|
|
//border-color: rgba(var(--bs-info-rgb), .07);
|
|
}
|
|
|
|
.alert-danger {
|
|
background-color: rgba(var(--bs-danger-rgb), .07);
|
|
//background-color: var(--bs-danger-bg-subtle);
|
|
}
|
|
|
|
.alert-primary {
|
|
background-color: rgba(var(--bs-primary-rgb), .07);
|
|
//background-color: var(--bs-primary-bg-subtle);
|
|
}
|
|
|
|
.alert-success {
|
|
background-color: rgba(var(--bs-success-rgb), .07);
|
|
border-color: rgba(var(--bs-success-rgb), 0.15);
|
|
//background-color: var(--bs-success-bg-subtle);
|
|
//border-color: var(--bs-success-border-subtle);
|
|
}
|
|
|
|
.alert-warning {
|
|
background-color: rgba(var(--bs-warning-rgb), .07);
|
|
//background-color: var(--bs-warning-bg-subtle);
|
|
}
|
|
|
|
/*
|
|
.alert-light {
|
|
color: #525252;
|
|
background-color: whitesmoke;
|
|
border-color: #f0f0f0;
|
|
}
|
|
*/
|
|
|
|
.user-nav {
|
|
--bs-nav-pills-link-active-bg:var(--bs-light-border-subtle);
|
|
--bs-nav-pills-link-active-color:var(--bs-body-color);
|
|
--bs-nav-link-color:var(--bs-body-color);
|
|
}
|
|
|
|
.navbar-brand {
|
|
img {
|
|
max-height:100%;
|
|
max-height:80px;
|
|
/*
|
|
html[data-bs-theme="dark"] & {
|
|
filter: brightness(5);
|
|
}
|
|
*/
|
|
}
|
|
}
|
|
|
|
.btn-shadow {
|
|
box-shadow:1px 1px 2px 1px rgba(var(--bs-body-color-rgb), 0.07), 1px 1px 2px 1px rgba(var(--bs-body-bg-rgb), 0.15) inset;
|
|
}
|
|
|
|
.btn-lg {
|
|
box-shadow:0 1px 3px 0 rgba(var(--bs-body-color-rgb), 0.07);
|
|
border-radius: 2px;
|
|
padding: 16px 30px;
|
|
line-height: 20px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
margin-right: 7px;
|
|
margin-left: 7px;
|
|
margin-bottom: 20px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.btn-primary {
|
|
//box-shadow:rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.2) 0px 0.75px 0px 0px inset, rgba(0, 0, 0, 0.2) 0px 1px 2px 0px, rgba(0, 0, 0, 0.4) 0px 0px 0px 1px;
|
|
//box-shadow: rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(0, 0, 0, 0) 0px 0px 0px 0px, rgba(255, 255, 255, 0.15) 0px 0.75px 0px 0px inset, rgba(0, 0, 0, 0.15) 0px 1px 2px 0px, rgba(0, 0, 0, 0.2) 0px 0px 0px 1px;
|
|
--bs-btn-border-color:rgba(var(--bs-primary-rgb), 0.3);
|
|
--bs-btn-padding-x: 1.5rem;
|
|
font-weight:500;
|
|
}
|
|
|
|
.form-control {
|
|
box-shadow: rgba(var(--bs-body-color-rgb), 0.05) 0px 1px 2px 0px inset;
|
|
}
|
|
|
|
.search-area {
|
|
&.toggle-hover {
|
|
input[type=search] {
|
|
width:0;
|
|
visibility:hidden;
|
|
transition:1s width;
|
|
position:absolute;
|
|
//top:100%;
|
|
right:2.9rem;
|
|
background-color:var(--bs-body-bg);
|
|
z-index:1;
|
|
|
|
&:focus {
|
|
width:auto;
|
|
visibility:visible;
|
|
}
|
|
}
|
|
|
|
input[type=search]:focus + button[type=submit] {
|
|
background-color:var(--bs-primary-bg-subtle);
|
|
}
|
|
|
|
&:hover {
|
|
input[type=search] {
|
|
width:auto;
|
|
visibility:visible;
|
|
}
|
|
|
|
button[type=submit] {
|
|
background-color:var(--bs-primary-bg-subtle);
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.search-results {
|
|
font-size:14px;
|
|
border-top: 1px solid var(--bs-border-color);
|
|
|
|
> div {
|
|
padding: 1rem;
|
|
}
|
|
|
|
.search-item {
|
|
border-top: 1px solid var(--bs-border-color);
|
|
min-height: 48px;
|
|
padding: 0.2rem;
|
|
display:flex;
|
|
align-items: center;
|
|
|
|
a {
|
|
display:block;
|
|
width:100%;
|
|
//color:var(--bs-body-text);
|
|
}
|
|
|
|
&:hover {
|
|
background:var(--bs-primary-bg-subtle);
|
|
}
|
|
|
|
&:last-child {
|
|
//border:none;
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
.card-default {
|
|
box-shadow: 0 4px 40px rgba(var(--bs-body-color-rgb), 0.07), inset 0 -1px 0 rgba(var(--bs-body-color-rgb), 0.07);
|
|
box-shadow: /*0px 3px 21px 5px rgba(var(--bs-body-color-rgb), 0.03), */0px 3px 3px 0px rgba(var(--bs-body-color-rgb), 0.03), rgba(29, 48, 61, 0.01) 0px 16px 40px 0px;
|
|
--bs-card-border-color: rgba(var(--bs-body-color-rgb), 0.15);
|
|
}
|
|
|
|
::marker {
|
|
color: var(--bs-gray-500);
|
|
}
|
|
|
|
|
|
[data-v-post-image][src=""] {
|
|
display: none;
|
|
}
|
|
|
|
[data-v-product-image][src=""] {
|
|
display: none;
|
|
}
|
|
|
|
.flip-box {
|
|
width: 300px;
|
|
height: 400px;
|
|
perspective: 1000px; /* Remove this if you don't want the 3D effect */
|
|
}
|
|
|
|
.flip-box-inner {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
transition: transform 0.8s;
|
|
transform-style: preserve-3d;
|
|
}
|
|
|
|
.flip-box.enabled:hover .flip-box-inner,
|
|
.flip-box.enabled.back .flip-box-inner {
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.flip-box-front, .flip-box-back {
|
|
position: absolute;
|
|
z-index:1;
|
|
width: 100%;
|
|
height: 100%;
|
|
-webkit-backface-visibility: hidden; /* Safari */
|
|
backface-visibility: hidden;
|
|
}
|
|
|
|
.flip-box-back {
|
|
z-index:2;
|
|
transform: rotateY(180deg);
|
|
}
|
|
|
|
.flip-box.enabled.vertical:hover .flip-box-inner,
|
|
.flip-box.enabled.vertical.back .flip-box-inner {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.flip-box.vertical .flip-box-back {
|
|
transform: rotateX(180deg);
|
|
}
|
|
|
|
.list-inline {
|
|
> li {
|
|
display:inline-block;
|
|
}
|
|
}
|
|
|
|
.signup,
|
|
.login,
|
|
.login-box,
|
|
.reset {
|
|
.card-header {
|
|
padding:2rem 2rem 0;
|
|
}
|
|
.card-body {
|
|
padding:2rem;
|
|
}
|
|
|
|
.form-control {
|
|
//padding:0.5rem 0.75rem;
|
|
}
|
|
|
|
.btn-login, .btn-signup {
|
|
padding: 0.7rem;
|
|
}
|
|
}
|
|
|
|
#page-loading-status {
|
|
position:fixed;
|
|
top:0px;
|
|
left:0;
|
|
width:0%;
|
|
z-index: 10;
|
|
--bs-progress-bg: transparent;
|
|
--bs-progress-bar-bg: var(--bs-link-hover-color);
|
|
--bs-progress-height: 2px;
|
|
}
|
|
|
|
#searchModal {
|
|
.modal-dialog {
|
|
padding-top:8rem;
|
|
}
|
|
|
|
input {
|
|
box-shadow:none;
|
|
}
|
|
|
|
.btn-close {
|
|
margin-top:6.3rem;
|
|
position:absolute;
|
|
top:0;
|
|
right:10px;
|
|
z-index:100;
|
|
cursor:pointer;
|
|
}
|
|
|
|
form {margin:0}
|
|
}
|
|
|
|
.modal-backdrop.show {
|
|
background:linear-gradient(to right bottom, rgba(0, 0, 0, 0.9), rgba(0, 0, 0, 0.3));
|
|
backdrop-filter:blur(2px);
|
|
}
|
|
|
|
img.avatar {
|
|
object-fit: cover;
|
|
aspect-ratio: 1 / 1;
|
|
}
|
|
|
|
.profile {
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
padding-bottom:3rem;
|
|
margin-bottom:3rem;
|
|
|
|
.profile-header {
|
|
background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
|
|
height: 250px;
|
|
margin-bottom: 60px;
|
|
border-bottom: 1px solid var(--bs-border-color);
|
|
position: relative;
|
|
border-radius:5px;
|
|
|
|
>.cover {
|
|
position: relative;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
img {
|
|
position: absolute;
|
|
width:auto;
|
|
height:auto;
|
|
top:0;
|
|
left:0;
|
|
max-width: initial;
|
|
min-height: 100%;
|
|
min-width: 100%;
|
|
object-fit: cover;
|
|
border-radius:5px;
|
|
|
|
left: 50%;
|
|
top: 50%;
|
|
height: 100%;
|
|
width: auto;
|
|
-webkit-transform: translate(-50%,-50%);
|
|
-ms-transform: translate(-50%,-50%);
|
|
transform: translate(-50%,-50%);
|
|
}
|
|
}
|
|
|
|
>.avatar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
max-width: 100%;
|
|
}
|
|
|
|
.avatar {
|
|
top: auto;
|
|
bottom: -50px;
|
|
left: 20px;
|
|
z-index: 1;
|
|
padding: 2px;
|
|
background-color: var(--bs-body-bg);;
|
|
border-radius: 50% !important;
|
|
|
|
img {
|
|
width: 150px;
|
|
object-fit: cover;
|
|
height: 150px;
|
|
border-radius: 50% !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.d-flex {
|
|
flex-direction:column;
|
|
}
|
|
}
|
|
}
|
|
|
|
input.label-over {
|
|
padding-top: 1rem;
|
|
padding-bottom: 0.2rem;
|
|
}
|
|
|
|
.input-group > input.label-over + label.form-label,
|
|
.input-group > input.label-over + label.col-form-label {
|
|
top: 2.7rem;
|
|
left: 1.5rem;
|
|
z-index: 10;
|
|
}
|
|
|
|
input.label-over + label.form-label,
|
|
input.label-over + label.col-form-label {
|
|
position: absolute;
|
|
margin-top: -2.6rem;
|
|
margin-left: 1rem;
|
|
color: var(--bs-secondary);
|
|
}
|
|
|
|
input.label-over + label.form-label {
|
|
margin-top: -2.1rem;
|
|
}
|
|
|
|
|
|
input.label-over:focus+label.form-label, input.label-over:not(:placeholder-shown)+label.form-label,
|
|
input.label-over:focus+label.col-form-label, input.label-over:not(:placeholder-shown)+label.col-form-label {
|
|
margin-top: -2.4rem;
|
|
font-size: 11px;
|
|
font-weight: 400;
|
|
transform: matrix(1, 0, 0, 1, 0, -8);
|
|
transition-duration:0.3s;
|
|
transition-property:all;
|
|
transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
input.label-over:focus+label.form-label, input.label-over:not(:placeholder-shown)+label.form-label {
|
|
margin-top: -2.1rem;
|
|
}
|
|
|
|
.c-compare {
|
|
--h: 9;
|
|
--m: 1rem 0;
|
|
--w: 16;
|
|
--thumb-bgc: red;
|
|
--thumb-bgc-focus: hsla(0, 70%, 70%, 0.7);
|
|
--thumb-w: 1rem;
|
|
|
|
margin: var(--m);
|
|
position: relative;
|
|
}
|
|
.c-compare::after {
|
|
content: "";
|
|
display: block;
|
|
padding-bottom: calc((var(--h) / var(--w)) * 100%);
|
|
}
|
|
.c-compare__left,
|
|
.c-compare__right {
|
|
height: 100%;
|
|
object-fit: cover;
|
|
position: absolute;
|
|
width: 100%;
|
|
}
|
|
.c-compare__left {
|
|
clip-path: polygon(0% 0%, var(--value) 0%, var(--value) 100%, 0% 100%);
|
|
}.profile-header {
|
|
background: linear-gradient(135deg, #4158D0 0%, #C850C0 100%);
|
|
height: 200px;
|
|
margin-bottom:60px;
|
|
position:relative;
|
|
}
|
|
|
|
.c-compare__right {
|
|
clip-path: polygon(100% 0%, var(--value) 0%, var(--value) 100%, 100% 100%);
|
|
}
|
|
.c-compare__range {
|
|
background-color: transparent;
|
|
box-sizing: border-box;
|
|
font-family: inherit;
|
|
height: 100%;
|
|
margin: 0;
|
|
outline: none;
|
|
position: absolute;
|
|
top: 0;
|
|
width: 100%;
|
|
}
|
|
.c-compare__range::-moz-range-thumb {
|
|
background-color: var(--thumb-bgc);
|
|
cursor: ew-resize;
|
|
height: 100%;
|
|
width: var(--thumb-w);
|
|
}
|
|
.c-compare__range::-webkit-slider-thumb {
|
|
background-color: var(--thumb-bgc);
|
|
cursor: ew-resize;
|
|
height: 100%;
|
|
width: var(--thumb-w);
|
|
}
|
|
.c-compare__range:focus::-webkit-slider-thumb {
|
|
background-color: var(--thumb-bgc-focus);
|
|
box-shadow: 0 0 0 3px var(--thumb-bgc);
|
|
}
|
|
.c-compare__range:focus::-moz-range-thumb {
|
|
background-color: var(--thumb-bgc-focus);
|
|
box-shadow: 0 0 0 3px var(--thumb-bgc);
|
|
}
|
|
.c-compare__range::-moz-range-track {
|
|
background: transparent;
|
|
background-size: 100%;
|
|
box-sizing: border-box;
|
|
}
|
|
.c-compare__range::-webkit-slider-runnable-track {
|
|
background: transparent;
|
|
background-size: 100%;
|
|
box-sizing: border-box;
|
|
height: 100%;
|
|
}
|
|
.c-compare__range,
|
|
.c-compare__range::-webkit-slider-runnable-track,
|
|
.c-compare__range::-webkit-slider-thumb {
|
|
-webkit-appearance: none;
|
|
appearance: none;
|
|
}
|
|
|
|
|
|
|
|
|