forked from 77media/video-flow
75 lines
2.2 KiB
CSS
75 lines
2.2 KiB
CSS
.tab-item:first-child {
|
|
position: relative;
|
|
}
|
|
.tab-item {
|
|
position: relative;
|
|
cursor: pointer;
|
|
--tw-bg-opacity: .2;
|
|
background-color: rgb(255 255 255 / var(--tw-bg-opacity));
|
|
--tw-backdrop-blur: blur(15px);
|
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
flex: 1 1 0%;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
.tab-item .content-wrapper {
|
|
position: relative;
|
|
height: 220px;
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
overflow: hidden;
|
|
border-radius: 16px;
|
|
padding: 2rem;
|
|
background-position: left center, right center;
|
|
}
|
|
.tab-item .tab-title {
|
|
font-size: 36px;
|
|
font-weight: 600;
|
|
line-height: 64px;
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
}
|
|
.tab-item .tab-description {
|
|
font-size: 16px;
|
|
font-weight: 300;
|
|
line-height: 22px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
}
|
|
.tab-item .tab-btn {
|
|
display: flex;
|
|
height: 40px;
|
|
min-width: 168px;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: center;
|
|
--tw-bg-opacity: -0.5;
|
|
background-color: rgb(89 0 255 / var(--tw-bg-opacity));
|
|
padding-left: 16px;
|
|
padding-right: 16px;
|
|
--tw-text-opacity: 1;
|
|
color: rgb(255 255 255 / var(--tw-text-opacity));
|
|
--tw-backdrop-blur: blur(10px);
|
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
|
gap: 6px;
|
|
overflow: hidden;
|
|
border-radius: 10px;
|
|
}
|
|
.tab-item .tab-btn .icon {
|
|
/* --tw-text-opacity: 1;
|
|
color: rgb(29 33 41 / var(--tw-text-opacity)); */
|
|
transform: translate(-100px);
|
|
transition-property: transform;
|
|
transition-duration: 0.3s;
|
|
}
|
|
.tab-item .tab-btn .btn-text {
|
|
transform: translate(-14px);
|
|
transition-property: transform;
|
|
transition-duration: 0.3s;
|
|
font-weight: 600;
|
|
}
|
|
.tab-item:hover .hover-btn {
|
|
--tw-bg-opacity: 0.5;
|
|
}
|
|
.tab-item:hover .hover-btn .btn-text, .tab-item:hover .hover-btn .icon {
|
|
transform: translate(0px);
|
|
} |