Spaces:
Sleeping
Sleeping
@charset "utf-8"; | |
/* | |
/* Copyright (c) 2024 SRBThemes | |
/* Author: SRBThemes | |
/* Item URL: https://themeforest.net/item/techwave-ai-html-dashboard-for-image-generation-chat-bot/46197058 | |
/* This file is made for CURRENT TEMPLATE | |
/* | |
List of CSS codes: | |
01) ROOT | |
02) Base | |
03) PRELOADER | |
04) Container | |
05) New tags and some custom codes | |
06) Site Structure | |
07) Main Button | |
08) Left Panel | |
09) Header | |
10) Footer | |
11) Page: Home (index) | |
12) Shortcode: Title | |
13) Shortcode: Interactive List | |
14) Shortcode: Members | |
15) Shortcode: Animated Title | |
16) Page Title | |
17) Page: Changelog | |
18) Searchbar | |
19) Shortcode: Accordion | |
20) Page: Community Feed | |
21) Tabs | |
22) Page: Personal Feed | |
23) Shortcode: Gallery Items | |
24) Like Button | |
25) Checkbox | |
26) Image Lightbox | |
27) Follow Button | |
28) Icon Button | |
29) Model Button (used in image lightbox) | |
30) Prompt Details (used in image lightbox) | |
31) Detailed list (used in image lightbox) | |
32) Grid Items (used in image lightbox) | |
33) Reportbox | |
34) Ajax Loader (Loading) | |
35) Page: Sign In and Sign Up | |
36) Select Filter (personal feed page) | |
37) Page: Notifications | |
38) Back To button (notification single page) | |
39) Page: Pricing | |
40) Shortcode: Pricing Mobile | |
41) Page: User Profile | |
42) Shortcode: Options list (used in user profile page) | |
43) Page: User Settings | |
44) Upload Button | |
45) Page: User Billing | |
46) Page: AI Chat Bot | |
47) Page: Documentation | |
48) Page: Image Generation | |
49) Icon Options (icon lightbox) | |
50) Generation Item (used in image generation page) | |
51) Generation List (used in image generation page) | |
52) Input Toggle (custom) | |
53) Select Model (used in image generation page) | |
53) Page: Image Generation | |
54) Input quantity (custom) | |
55) Input Range (custom) | |
56) Page: Privacy Policy | |
57) Contact Form | |
58) Page: Contact | |
59) Page: Models | |
60) Model Items (used in model page) | |
61) Bookmark button | |
62) Font Trigger (used in AI chat bot page) | |
63) Font Trigger Lightbox | |
64) Tooltipster custom theme named: tooltipster-techwave (it can be changed in init.js) | |
65) Page: Intro | |
66) Media Queries (Responsive) | |
/*------------------------------------------------------------------*/ | |
/* 01) ROOT | |
/*------------------------------------------------------------------*/ | |
:root{ | |
color-scheme: dark; | |
--techwave-site-bg-color: #0f0e11; | |
--techwave-header-bg-color: #17151b; | |
--techwave-some-r-bg-color: #17151b; | |
--techwave-some-a-bg-color: #2b2830; | |
--techwave-main-color: #7c5fe3; | |
--techwave-main-color1: #8768f8; | |
--techwave-main-color2: #b7a4fb; | |
--techwave-heading-color: #c0bcca; | |
--techwave-body-color: #7e7a86; | |
--techwave-border-color: #312e37; | |
--techwave-button-bg-color: #1c1925; | |
--techwave-hover-color: #fff; | |
--techwave-heading-font-family: 'Heebo', sans-serif; | |
--techwave-body-font-family: 'Work Sans', sans-serif; | |
--techwave-left-panel-width: 300px; | |
--techwave-header-height: 100px; | |
} | |
@media(min-width: 1041px){ | |
.panel-opened:root{ | |
--techwave-left-panel-width: 76px; | |
} | |
} | |
@media(max-width: 1040px){ | |
:root{ | |
--techwave-header-height: 80px; | |
} | |
} | |
[data-techwave-skin="light"]:root{ | |
color-scheme: light; | |
--techwave-site-bg-color: #fff; | |
--techwave-header-bg-color: #f5f5f5; | |
--techwave-some-r-bg-color: #f5f5f5; | |
--techwave-some-a-bg-color: #e7e7e7; | |
--techwave-main-color: #7c5fe3; | |
--techwave-main-color1: #8768f8; | |
--techwave-main-color2: #b7a4fb; | |
--techwave-heading-color: #333; | |
--techwave-body-color: #444; | |
--techwave-border-color: #ddd; | |
--techwave-button-bg-color: #f5f5f5; | |
--techwave-hover-color: #000; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 02) Base | |
/*------------------------------------------------------------------*/ | |
html{ | |
overflow-x: hidden; | |
padding: 0px; | |
margin: 0px; | |
} | |
*:after, | |
*:before, | |
*{ | |
box-sizing: border-box; | |
} | |
body{ | |
font-family: var(--techwave-body-font-family); | |
font-size: 16px; | |
letter-spacing: 0; | |
line-height: 1.5; | |
font-weight: 400; | |
color: var(--techwave-body-color); | |
position: relative; | |
word-break: break-word; | |
background-color: var(--techwave-site-bg-color); | |
} | |
.fn__svg{ | |
fill: currentcolor; | |
width: 18px; | |
height: 18px; | |
} | |
.replaced-svg{ | |
opacity: 1; | |
} | |
p{ | |
letter-spacing: 0; | |
margin-bottom: 20px; | |
} | |
ol li{ | |
margin-bottom: 17px; | |
} | |
ol li:last-child{ | |
margin-bottom: 0; | |
} | |
.heading_color{ | |
color: var(--techwave-heading-color); | |
} | |
h1, h2, h3, h4, h5, h6{ | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
line-height: 1.22; | |
letter-spacing: 0; | |
} | |
h1>a, h2>a, h3>a, h4>a, h5>a, h6>a{ | |
text-decoration: none; | |
color: var(--techwave-heading-color); | |
} | |
h1>a:hover, h2>a:hover, h3>a:hover, h4>a:hover, h5>a:hover, h6>a:hover{ | |
color: var(--techwave-main-color); | |
} | |
select:focus{ | |
border-color: var(--techwave-main-color); | |
} | |
select{ | |
display: block; | |
height: 40px; | |
width: 100%; | |
padding: 0 14px; | |
background-color: var(--techwave-some-a-bg-color); | |
border: 2px solid transparent; | |
border-radius: 5px; | |
outline: none; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 16px; | |
position: relative; | |
line-height: 40px; | |
} | |
hr{ | |
outline: none; | |
border: none; | |
border-top: 1px solid var(--techwave-border-color); | |
margin: 0; | |
margin-bottom: 20px; | |
} | |
hr[data-h="2"]{border-top-width: 2px;} | |
hr[data-h="3"]{border-top-width: 3px;} | |
hr[data-h="4"]{border-top-width: 4px;} | |
hr[data-h="5"]{border-top-width: 5px;} | |
hr[data-h="6"]{border-top-width: 6px;} | |
hr[data-h="7"]{border-top-width: 7px;} | |
hr[data-h="8"]{border-top-width: 8px;} | |
hr[data-h="9"]{border-top-width: 9px;} | |
hr[data-h="10"]{border-top-width: 10px;} | |
/*------------------------------------------------------------------*/ | |
/* 03) PRELOADER | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_preloader.fn_ready{ | |
opacity: 0; | |
visibility: hidden; | |
pointer-events: none; | |
} | |
.techwave_fn_preloader.enabled{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.techwave_fn_preloader{ | |
position: fixed; | |
padding: 0; | |
margin: 0; | |
z-index: 1000; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
top: 0; | |
background-color: var(--techwave-site-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
display: none; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
transition: all .3s ease; | |
} | |
.techwave_fn_preloader svg{ | |
width: 240px; | |
height: 240px; | |
border-radius: 100%; | |
position: relative; | |
} | |
.techwave_fn_preloader .first_circle{ | |
fill: none; | |
stroke-width: 10px; | |
stroke: #080808; | |
} | |
.techwave_fn_preloader .second_circle{ | |
fill: none; | |
stroke-width: 10px; | |
stroke-linecap: round; | |
transform: rotate(-90deg); | |
transform-origin: 50% 50%; | |
stroke-dasharray: 360; | |
stroke-dashoffset: 100; | |
stroke: var(--techwave-main-color); | |
animation: techwave_fn_preloader 10s infinite; | |
position: relative; | |
z-index: 1; | |
} | |
@keyframes techwave_fn_preloader{ | |
0%{stroke-dasharray: 360;} | |
50%{stroke-dasharray: 1;} | |
100%{stroke-dasharray: 360;} | |
} | |
/*------------------------------------------------------------------*/ | |
/* 04) Container | |
/*------------------------------------------------------------------*/ | |
.container{ | |
width: 100%; | |
max-width: 1400px; | |
padding: 0 40px; | |
margin: 0 auto; | |
} | |
.container.wide{ | |
max-width: 1680px; | |
} | |
.container.small{ | |
max-width: 780px; | |
} | |
.container.medium{ | |
max-width: 980px; | |
} | |
.container:after, | |
.clearfix:after, | |
.clearfix:before{ | |
content: ''; | |
clear: both; | |
display: table; | |
} | |
@media(max-width: 1040px){.container{padding: 0 20px;}} | |
@media(max-width: 480px){.container{padding: 0 10px;}} | |
/*------------------------------------------------------------------*/ | |
/* 05) New tags and some custom codes | |
/*------------------------------------------------------------------*/ | |
.fn__full_link{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
} | |
frenify_main{ | |
color: var(--techwave-main-color); | |
-webkit-user-select: all; | |
-moz-user-select: all; | |
-ms-user-select: all; | |
-o-user-select: all; | |
user-select: all; | |
} | |
frenify_uselect{ | |
-webkit-user-select: all; | |
-moz-user-select: all; | |
-ms-user-select: all; | |
-o-user-select: all; | |
user-select: all; | |
} | |
frenify_typing{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
frenify_typing h3{ | |
margin: 0; | |
font-size: 16px; | |
font-weight: 400; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
frenify_typing span{ | |
color: var(--techwave-heading-color); | |
overflow: hidden; | |
border-right: 2px solid var(--techwave-main-color); | |
white-space: nowrap; | |
-webkit-animation: frenify_typing_animation 1s steps(150, end), frenify_blink_caret .5s step-end infinite; | |
animation: frenify_typing_animation 1s steps(150, end), frenify_blink_caret .5s step-end infinite; | |
} | |
@keyframes frenify_typing_animation { | |
from { width: 0 } | |
to { width: 100% } | |
} | |
@keyframes frenify_blink_caret { | |
from, to { border-color: transparent } | |
50% { border-color: var(--techwave-main-color); } | |
} | |
/*------------------------------------------------------------------*/ | |
/* 06) Site Structure | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_wrapper, | |
.techwave_fn_wrapper *{ | |
box-sizing: border-box; | |
} | |
.techwave_fn_wrapper:not(.fn__has_sidebar) .techwave_fn_image_generation_page .sidebar__trigger{ | |
color: var(--techwave-main-color); | |
} | |
.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_content{ | |
margin-right: 300px; | |
} | |
.techwave_fn_content{ | |
position: relative; | |
margin-left: var(--techwave-left-panel-width); | |
margin-top: var(--techwave-header-height); | |
min-height: calc(100vh - var(--techwave-header-height)); | |
transition: all .2s ease; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 07) Main Button | |
/*------------------------------------------------------------------*/ | |
.fn__submit{ | |
display: block; | |
position: relative; | |
background-color: var(--techwave-button-bg-color); | |
border-radius: 20px; | |
} | |
.fn__submit input, | |
.techwave_fn_button{ | |
display: block; | |
width: fit-content; | |
max-width: 100%; | |
text-decoration: none; | |
font-weight: 500; | |
font-size: 14px; | |
letter-spacing: .5px; | |
font-family: var(--techwave-heading-font-family); | |
height: 40px; | |
line-height: 40px; | |
padding: 0 34px; | |
position: relative; | |
color: var(--techwave-heading-color); | |
text-transform: uppercase; | |
text-align: center; | |
white-space: nowrap; | |
background-color: var(--techwave-button-bg-color); | |
outline: none; | |
outline-color: transparent; | |
border-radius: 20px; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.fn__submit input{ | |
width: 100%; | |
background-color: transparent ; | |
} | |
.techwave_fn_button.medium{ | |
padding: 0 97px; | |
height: 60px; | |
line-height: 60px; | |
border-radius: 30px; | |
font-size: 18px; | |
} | |
.techwave_fn_button.medium:after, | |
.techwave_fn_button.medium:before{ | |
border-radius: 30px; | |
} | |
.techwave_fn_button.small__border:after, | |
.techwave_fn_button.small__border:before, | |
.techwave_fn_button.small__border{ | |
border-radius: 5px; | |
} | |
.techwave_fn_button.small__border{ | |
background-color: var(--techwave-some-a-bg-color); | |
padding: 0 20px; | |
} | |
.techwave_fn_button.has__icon{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_button.has__icon .fn__svg{ | |
width: 16px; | |
height: 16px; | |
margin-right: 5px; | |
} | |
.fn__submit input, | |
.techwave_fn_button span{ | |
position: relative; | |
z-index: 5; | |
} | |
.techwave_fn_button span{ | |
top: 1px; | |
} | |
.fn__submit:hover:after, | |
.techwave_fn_button:hover:after{ | |
animation-duration: 2s; | |
} | |
.fn__submit:hover, | |
.techwave_fn_button:hover{ | |
color: var(--techwave-hover-color); | |
} | |
.fn__submit:after, | |
.techwave_fn_button:after{ | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
border-radius: 20px; | |
border: 2px solid transparent; | |
background: -moz-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
background: -webkit-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
background: linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
-webkit-mask: | |
linear-gradient(#fff 0 0) padding-box, | |
linear-gradient(#fff 0 0); | |
-webkit-mask-composite: destination-out; | |
-webkit-mask-composite: source-out; | |
mask-composite: exclude; | |
background-size: 300% 300%; | |
-webkit-animation: animatedgradient 4s ease alternate infinite; | |
animation: animatedgradient 4s ease alternate infinite; | |
} | |
.fn__submit:before, | |
.techwave_fn_button:before{ | |
right: 0; | |
bottom: 0; | |
top: 0; | |
left: 0; | |
position: absolute; | |
color: var(--techwave-main-color1); | |
content: ''; | |
opacity: .1; | |
border-radius: 20px; | |
box-shadow: 0px 5px 15px; | |
} | |
.techwave_fn_button.enabled:after{ | |
display: block; | |
} | |
.techwave_fn_button.disabled{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.techwave_fn_button.disabled:after{ | |
display: none; | |
} | |
@keyframes animatedgradient { | |
0% { | |
background-position: 0% 50%; | |
} | |
50% { | |
background-position: 100% 50%; | |
} | |
100% { | |
background-position: 0% 50%; | |
} | |
} | |
/*------------------------------------------------------------------*/ | |
/* 08) Left Panel | |
/*------------------------------------------------------------------*/ | |
.short_logo{ | |
display: none; | |
} | |
.retina_logo{ | |
display: none; | |
} | |
@media (-webkit-min-device-pixel-ratio: 1.1),(min-device-pixel-ratio: 1.1),(min-resolution: 120dpi){ | |
.retina_logo{display: block;} | |
.desktop_logo{display: none;} | |
} | |
.techwave_fn_leftpanel{ | |
z-index: 101; | |
position: fixed; | |
background-color: var(--techwave-some-r-bg-color); | |
width: var(--techwave-left-panel-width); | |
left: 0; | |
top: 0; | |
bottom: 0; | |
border-right: 1px solid var(--techwave-border-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
transition: all .2s ease; | |
} | |
.techwave_fn_leftpanel .leftpanel_logo{ | |
min-height: var(--techwave-header-height); | |
height: var(--techwave-header-height); | |
border-bottom: 1px solid var(--techwave-border-color); | |
padding: 20px 70px 20px 30px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
position: relative; | |
} | |
.techwave_fn_leftpanel .mobile_closer{ | |
display: none; | |
} | |
.techwave_fn_leftpanel .fn__icon_button{ | |
position: absolute; | |
top: 50%; | |
margin-top: -15px; | |
right: 20px; | |
z-index: 4; | |
} | |
.techwave_fn_leftpanel .fn__icon_button .fn__svg{ | |
transform: rotate(180deg); | |
} | |
.techwave_fn_leftpanel .leftpanel_content{ | |
flex: 1 0 auto; | |
padding: 48px 20px; | |
overflow-y: auto; | |
height: calc(100% - var(--techwave-header-height)); | |
} | |
.techwave_fn_leftpanel .leftpanel_content{ | |
scrollbar-width: thin; | |
scrollbar-color: #999 #fff; | |
} | |
.techwave_fn_leftpanel .leftpanel_content::-webkit-scrollbar{ | |
width: 4px; | |
} | |
.techwave_fn_leftpanel .leftpanel_content:-webkit-scrollbar-track{ | |
background: var(--techwave-some-a-bg-color); | |
} | |
.techwave_fn_leftpanel .leftpanel_content::-webkit-scrollbar-thumb{ | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 6px; | |
} | |
.techwave_fn_leftpanel .nav_group{ | |
margin-bottom: 38px; | |
} | |
.techwave_fn_leftpanel .nav_group:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_leftpanel .group__title{ | |
margin: 0; | |
padding: 0 10px; | |
text-transform: uppercase; | |
font-weight: 500; | |
font-size: 11px; | |
letter-spacing: .5px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 12px; | |
} | |
.techwave_fn_leftpanel .group__list{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.techwave_fn_leftpanel .group__list li{ | |
margin-bottom: 4px; | |
position: relative; | |
} | |
.techwave_fn_leftpanel .group__list li:last-child{ | |
margin-bottom: 0px; | |
} | |
.techwave_fn_leftpanel .group__list a{ | |
font-weight: 400; | |
border-radius: 5px; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
text-decoration: none; | |
min-height: 36px; | |
padding: 5px 10px 5px 42px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
position: relative; | |
} | |
.techwave_fn_leftpanel .group__list .menu-item-has-children > a{ | |
padding-right: 22px; | |
} | |
.techwave_fn_leftpanel .group__list .hovered > a, | |
.techwave_fn_leftpanel .group__list a.active, | |
.techwave_fn_leftpanel .group__list a:hover{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.techwave_fn_leftpanel .group__list a.active .text{ | |
color: var(--techwave-hover-color); | |
} | |
.techwave_fn_leftpanel .group__list .icon{ | |
position: absolute; | |
left: 10px; | |
top: 50%; | |
margin-top: -8px; | |
display: block; | |
} | |
.techwave_fn_leftpanel .group__list .icon .fn__svg{ | |
width: 16px; | |
height: 16px; | |
display: block; | |
} | |
.techwave_fn_leftpanel .group__list .text{ | |
line-height: 24px; | |
position: relative; | |
top: 1px; | |
} | |
.techwave_fn_leftpanel .group__list .trigger{ | |
right: 5px; | |
top: 50%; | |
margin-top: -6px; | |
position: absolute; | |
display: block; | |
color: var(--techwave-heading-color); | |
transform: rotate(90deg); | |
transition: all .2s ease; | |
} | |
.techwave_fn_leftpanel .group__list .closed .trigger{ | |
transform: rotate(-90deg); | |
} | |
.techwave_fn_leftpanel .group__list .trigger .fn__svg{ | |
width: 12px; | |
height: 12px; | |
display: block; | |
} | |
.techwave_fn_leftpanel .group__list .count{ | |
width: 24px; | |
margin-left: 10px; | |
display: inline-block; | |
height: 24px; | |
background-color: #ab0cdf; | |
color: #fff; | |
font-weight: 500; | |
line-height: 25px; | |
text-align: center; | |
font-size: 11px; | |
font-family: var(--techwave-heading-font-family); | |
border-radius: 100%; | |
vertical-align: top; | |
} | |
.fn__sup{ | |
color: var(--techwave-main-color); | |
vertical-align: super; | |
text-transform: uppercase; | |
font-weight: 500; | |
font-size: 11px; | |
letter-spacing: .5px; | |
margin-left: 2px; | |
} | |
.techwave_fn_leftpanel .group__list ul{ | |
margin: 0; | |
list-style-type: none; | |
padding: 0; | |
margin-left: 26px; | |
margin-top: 4px; | |
overflow: hidden; | |
} | |
.techwave_fn_leftpanel .group__list ul a{ | |
padding-left: 17px; | |
} | |
.techwave_fn_leftpanel .group__list ul a:after{ | |
width: 5px; | |
height: 2px; | |
background-color: var(--techwave-heading-color); | |
position: absolute; | |
left: 6px; | |
top: 50%; | |
margin-top: -1px; | |
content: ''; | |
} | |
@media(min-width: 1041px){ | |
.panel-opened .techwave_fn_leftpanel .group__list .icon .fn__svg{ | |
width: 18px; | |
height: 18px; | |
} | |
.panel-opened .techwave_fn_leftpanel .group__list a{ | |
width: 36px; | |
padding: 0; | |
} | |
.panel-opened .techwave_fn_leftpanel .group__list .menu-item-has-children > a:after{ | |
content: ''; | |
position: absolute; | |
width: 10px; | |
height: 10px; | |
background-color: #f1416c; | |
left: 50%; | |
bottom: 50%; | |
margin-left: 2px; | |
margin-bottom: 2px; | |
border-radius: 100%; | |
} | |
.panel-opened .techwave_fn_leftpanel .leftpanel_logo{ | |
padding: 0; | |
justify-content: center; | |
} | |
.panel-opened .techwave_fn_leftpanel .short_logo{ | |
display: block; | |
} | |
.panel-opened .techwave_fn_leftpanel .fn__closer{ | |
right: -15px; | |
transform: rotate(180deg); | |
} | |
.panel-opened .techwave_fn_leftpanel .full_logo, | |
.panel-opened .techwave_fn_leftpanel .group__title, | |
.panel-opened .techwave_fn_leftpanel .group__list .trigger, | |
.panel-opened .techwave_fn_leftpanel .group__list .text{ | |
display: none; | |
} | |
.panel-opened .techwave_fn_leftpanel .group__list ul{ | |
display: none ; | |
} | |
} | |
/*------------------------------------------------------------------*/ | |
/* 09) Header | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_header{ | |
position: fixed; | |
top: 0; | |
left: var(--techwave-left-panel-width); | |
right: 0; | |
height: var(--techwave-header-height); | |
background-color: var(--techwave-header-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
padding: 0 40px; | |
z-index: 100; | |
transition: all .2s ease; | |
} | |
.techwave_fn_header:after{ | |
content: ''; | |
pointer-events: none; | |
position: absolute; | |
bottom: 0; | |
z-index: 1; | |
left: 0; | |
right: 0; | |
height: 1px; | |
background-color: var(--techwave-border-color); | |
} | |
.fn__token_info{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
height: var(--techwave-header-height); | |
position: relative; | |
} | |
.fn__token_info:hover .token__popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.fn__token_info .token__popup{ | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
width: 200px; | |
position: absolute; | |
left: 0; | |
top: 100%; | |
background-color: var(--techwave-header-bg-color); | |
padding: 12px 15px; | |
border-radius: 0 0 5px 5px; | |
border: 1px solid var(--techwave-border-color);; | |
margin-top: -1px; | |
font-family: var(--techwave-heading-font-family); | |
font-size: 12px; | |
letter-spacing: .5px; | |
transition: all .2s ease; | |
} | |
.fn__token_info .token__popup span{ | |
color: var(--techwave-heading-color); | |
} | |
.fn__token_info .token_summary{ | |
border-radius: 5px; | |
background-color: var(--techwave-some-a-bg-color); | |
font-family: var(--techwave-heading-font-family); | |
line-height: 16px; | |
height: 40px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
padding: 5px 12px; | |
margin-right: 20px; | |
} | |
.fn__token_info .count{ | |
font-weight: 600; | |
font-size: 18px; | |
color: var(--techwave-heading-color); | |
padding-right: 25px; | |
position: relative; | |
} | |
.fn__token_info .text{ | |
line-height: 16px; | |
font-size: 12px; | |
} | |
.fn__token_info .count:after{ | |
content: ''; | |
position: absolute; | |
right: 12px; | |
top: 50%; | |
margin-top: -15px; | |
height: 30px; | |
background-color: #413e45; | |
width: 1px; | |
} | |
.fn__nav_bar{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.fn__nav_bar .bar__item{ | |
height: var(--techwave-header-height); | |
position: relative; | |
margin-right: 10px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.fn__nav_bar .bar__item:last-child{ | |
margin-right: 0; | |
} | |
.fn__nav_bar .item_opener{ | |
width: 50px; | |
height: 50px; | |
text-decoration: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 100%; | |
color: var(--techwave-heading-color); | |
position: relative; | |
} | |
.fn__nav_bar .item_opener:hover{ | |
opacity: 0.8; | |
} | |
.fn__nav_bar .item_opener.full_screen .f_screen{ | |
opacity: 0; | |
transform: scale(0.7); | |
} | |
.fn__nav_bar .item_opener.full_screen .s_screen{ | |
opacity: 1; | |
transform: scale(1); | |
} | |
.fn__nav_bar .item_opener .fn__svg{ | |
width: 24px; | |
height: 24px; | |
transition: all .3s ease; | |
} | |
.fn__nav_bar .item_opener .dark_mode{ | |
opacity: 0; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin: -12px 0 0 -12px; | |
transform: scale(0.7) rotate(-90deg); | |
} | |
[data-techwave-skin="light"] .fn__nav_bar .item_opener .dark_mode{ | |
opacity: 1; | |
transform: scale(1) rotate(0deg); | |
} | |
[data-techwave-skin="light"] .fn__nav_bar .item_opener .light_mode{ | |
opacity: 0; | |
transform: scale(0.7) rotate(90deg); | |
} | |
[data-techwave-skin="dark"] .fn__nav_bar .item_opener .light_mode{ | |
opacity: 1; | |
transform: scale(1) rotate(0deg); | |
} | |
[data-techwave-skin="dark"] .fn__nav_bar .item_opener .dark_mode{ | |
opacity: 0; | |
transform: scale(0.7) rotate(-90deg); | |
} | |
.fn__nav_bar .item_opener .s_screen{ | |
opacity: 0; | |
position: absolute; | |
left: 50%; | |
top: 50%; | |
margin: -9px 0 0 -9px; | |
transform: scale(0.7); | |
width: 18px; | |
height: 18px; | |
} | |
.fn__nav_bar .bar__item_user{ | |
margin-left: 10px; | |
} | |
.fn__nav_bar .user_opener{ | |
width: 60px; | |
height: 60px; | |
border: 2px solid var(--techwave-border-color); | |
border-radius: 5px; | |
overflow: hidden; | |
} | |
.fn__nav_bar .user_opener img{ | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
aspect-ratio: 1 / 1; | |
border-radius: 3px; | |
} | |
.fn__nav_bar .item_popup{ | |
position: absolute; | |
right: 0; | |
top: 100%; | |
background-color: var(--techwave-header-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 0 0 5px 5px; | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
transition: all .2s ease; | |
margin-top: -1px; | |
} | |
.fn__nav_bar .item_popup[data-position="left"]{ | |
right: auto; | |
left: 0; | |
} | |
.fn__nav_bar .bar__item_user .item_popup{ | |
padding: 20px; | |
width: 300px; | |
max-width: calc(100vw - 80px); | |
} | |
.fn__nav_bar .bar__item_user.opened .item_popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.fn__nav_bar .bar__item_user:hover .user_opener, | |
.fn__nav_bar .bar__item_user.opened .user_opener{ | |
border-color: var(--techwave-main-color); | |
} | |
.fn__nav_bar .bar__item_user .user_profile{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
padding: 0 10px 20px 10px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.fn__nav_bar .bar__item_user .user_img{ | |
margin-right: 15px; | |
width: 60px; | |
min-width: 60px; | |
} | |
.fn__nav_bar .bar__item_user .user_img img{ | |
width: 100%; | |
object-fit: cover; | |
aspect-ratio: 1 / 1; | |
border: 2px solid var(--techwave-border-color); | |
border-radius: 5px; | |
} | |
.fn__nav_bar .bar__item_user .user_name{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
font-size: 16px; | |
} | |
.fn__nav_bar .bar__item_user .user_name span{ | |
height: 16px; | |
line-height: 16px; | |
display: inline-block; | |
padding: 0 5px; | |
border-radius: 5px; | |
background-color: #ab0cdf; | |
color: #fff; | |
font-weight: 500; | |
font-size: 11px; | |
text-transform: uppercase; | |
font-family: var(--techwave-heading-font-family); | |
margin-left: 10px; | |
vertical-align: middle; | |
position: relative; | |
top: -2px; | |
} | |
.fn__nav_bar .bar__item_user .user_profile p{ | |
margin: 0; | |
padding: 0; | |
font-family: var(--techwave-heading-font-family); | |
font-size: 12px; | |
letter-spacing: 0; | |
} | |
.fn__nav_bar .bar__item_user .user_profile a{ | |
text-decoration: none; | |
color: var(--techwave-heading-color); | |
} | |
.fn__nav_bar .bar__item_user .user_profile a:hover{ | |
color: var(--techwave-main-color); | |
} | |
.fn__nav_bar .bar__item_user .user_nav{ | |
padding-top: 20px; | |
} | |
.fn__nav_bar .bar__item_user .user_nav li{ | |
margin-bottom: 4px; | |
} | |
.fn__nav_bar .bar__item_user .user_nav li:last-child{ | |
margin-bottom: 0px; | |
} | |
.fn__nav_bar .bar__item_user .user_nav ul{ | |
list-style-type: none; | |
margin: 0; | |
padding: 0; | |
} | |
.fn__nav_bar .bar__item_user .user_nav a{ | |
font-weight: 400; | |
border-radius: 5px; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
text-decoration: none; | |
height: 36px; | |
padding: 0 10px 0 42px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
position: relative; | |
} | |
.fn__nav_bar .bar__item_user .user_nav .icon{ | |
position: absolute; | |
left: 10px; | |
top: 50%; | |
margin-top: -8px; | |
display: block; | |
} | |
.fn__nav_bar .bar__item_user .user_nav .icon .fn__svg{ | |
width: 16px; | |
height: 16px; | |
display: block; | |
} | |
.fn__nav_bar .bar__item_user .user_nav a.active, | |
.fn__nav_bar .bar__item_user .user_nav a:hover{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.fn__nav_bar .bar__item_user .user_nav .text{ | |
position: relative; | |
top: 1px; | |
} | |
.fn__nav_bar .bar__item_language.opened .item_popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.fn__nav_bar .bar__item_language.opened .item_opener{ | |
color: var(--techwave-main-color); | |
} | |
.fn__nav_bar .bar__item_language .item_popup{ | |
padding: 20px; | |
width: 200px; | |
max-width: calc(100vw - 80px); | |
} | |
.fn__nav_bar .bar__item_language .item_popup li{ | |
margin-bottom: 4px; | |
} | |
.fn__nav_bar .bar__item_language .item_popup li:last-child{ | |
margin-bottom: 0px; | |
} | |
.fn__nav_bar .bar__item_language .item_popup ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.fn__nav_bar .bar__item_language .item_popup span, | |
.fn__nav_bar .bar__item_language .item_popup a{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
height: 36px; | |
padding: 0 15px; | |
border-radius: 5px; | |
text-decoration: none; | |
font-size: 16px; | |
letter-spacing: 0; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
transition: all .3s ease; | |
} | |
.fn__nav_bar .bar__item_language .item_popup a:hover, | |
.fn__nav_bar .bar__item_language .item_popup .active{ | |
background-color: var(--techwave-some-a-bg-color); | |
color: var(--techwave-hover-color); | |
} | |
.fn__nav_bar .bar__item_notification .item_opener:after{ | |
content: ''; | |
position: absolute; | |
width: 12px; | |
height: 12px; | |
background-color: #f1416c; | |
border-radius: 100%; | |
top: 9px; | |
right: 10px; | |
opacity: 0; | |
visibility: hidden; | |
} | |
.fn__nav_bar .bar__item_notification.has_notification .item_opener:after{ | |
opacity: 1; | |
visibility: visible; | |
} | |
.fn__nav_bar .bar__item_notification .item_popup{ | |
width: 340px; | |
padding: 20px; | |
max-width: calc(100vw - 80px); | |
} | |
.fn__nav_bar .bar__item_notification.opened .item_popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_header{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: space-between; | |
column-gap: 20px; | |
padding: 1px 15px 20px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_title{ | |
font-size: 12px; | |
font-weight: 500; | |
margin: 0; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-body-color); | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_header a{ | |
text-decoration: none; | |
font-size: 12px; | |
font-weight: 400; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-body-color); | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_header a:hover{ | |
color: var(--techwave-main-color); | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list{ | |
padding: 25px 15px 0; | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list li{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
margin-bottom: 20px; | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list li:last-child{ | |
margin-bottom: 0; | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list p{ | |
margin: 0; | |
padding: 0; | |
font-size: 16px; | |
font-weight: 400; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list p a{ | |
color: var(--techwave-heading-color); | |
text-decoration: none; | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list p a:hover{ | |
color: var(--techwave-main-color); | |
} | |
.fn__nav_bar .bar__item_notification .ntfc_list span{ | |
font-size: 12px; | |
font-weight: 400; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-body-color); | |
margin-top: -1px; | |
} | |
.fn__nav_bar .bar__item_search .item_popup{ | |
width: 200px; | |
padding: 20px; | |
max-width: calc(100vw - 80px); | |
} | |
.techwave_fn_fixedsub{ | |
opacity: 0; | |
visibility: hidden; | |
position: fixed; | |
left: var(--techwave-left-panel-width); | |
top: var(--techwave-header-height); | |
z-index: 101; | |
display: none; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
border-left: none; | |
margin-top: calc(var(--techwave-header-height) - 21px); /* 20px = padding-top and 1px = border-top */ | |
padding: 20px; | |
transition: all .2s ease; | |
} | |
.panel-opened .techwave_fn_fixedsub{ | |
display: block; | |
} | |
.techwave_fn_fixedsub.opened{ | |
opacity: 1; | |
visibility: visible; | |
} | |
.techwave_fn_fixedsub ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.techwave_fn_fixedsub li{ | |
margin-bottom: 4px; | |
position: relative; | |
} | |
.techwave_fn_fixedsub li:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_fixedsub a{ | |
font-weight: 400; | |
border-radius: 5px; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
text-decoration: none; | |
min-height: 36px; | |
padding: 5px 10px 5px 17px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
position: relative; | |
} | |
.techwave_fn_fixedsub a:after{ | |
width: 5px; | |
height: 2px; | |
background-color: var(--techwave-heading-color); | |
position: absolute; | |
left: 6px; | |
top: 50%; | |
margin-top: -1px; | |
content: ''; | |
} | |
.techwave_fn_fixedsub a.active, | |
.techwave_fn_fixedsub a:hover{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 10) Footer | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_footer{ | |
margin-top: auto; | |
min-height: 71px; | |
padding: 18px 40px; | |
border-top: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_footer_content{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_footer .copyright p{ | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
letter-spacing: .5px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_footer .menu_items ul{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
margin-left: -30px; | |
} | |
.techwave_fn_footer .menu_items li{ | |
margin: 5px 0 5px 30px; | |
} | |
.techwave_fn_footer .menu_items a{ | |
text-decoration: none; | |
font-size: 14px; | |
letter-spacing: .5px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_footer .menu_items a:hover{ | |
color: var(--techwave-main-color); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 11) Page: Home (index) | |
/*------------------------------------------------------------------*/ | |
.section_home{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
min-height: calc(100vh - var(--techwave-header-height) - 71px); | |
} | |
.section_home .section_left{ | |
padding: 93px 40px 80px; | |
border-right: 1px solid var(--techwave-border-color); | |
width: 60%; | |
} | |
.section_home .section_right{ | |
width: 40%; | |
padding: 155px 40px; | |
} | |
.section_home .company_info{ | |
margin: 0 auto; | |
max-width: 350px; | |
} | |
.section_home .company_info hr{ | |
margin-bottom: 24px; | |
} | |
.section_home .company_info p{ | |
margin-bottom: 23px; | |
} | |
.section_home .company_info img{ | |
margin-bottom: 25px; | |
} | |
.section_home .techwave_fn_title_holder{ | |
margin-bottom: 43px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 12) Shortcode: Title | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_title_holder{ | |
text-align: center; | |
} | |
.techwave_fn_title_holder .title{ | |
margin: 0; | |
padding: 0; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
margin-bottom: -1px; | |
font-size: 40px; | |
} | |
.techwave_fn_title_holder .desc{ | |
margin: 0; | |
padding: 0; | |
font-size: 18px; | |
font-weight: 400; | |
font-family: var(--techwave-body-font-family); | |
color: var(--techwave-body-color); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 13) Shortcode: Interactive List | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_interactive_list ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
margin-left: -20px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: center; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_interactive_list li{ | |
width: 360px; | |
max-width: 50%; | |
padding-left: 20px; | |
margin-bottom: 20px; | |
} | |
.techwave_fn_interactive_list .item{ | |
border: 2px solid var(--techwave-border-color); | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
min-height: 100%; | |
text-align: center; | |
transition: all .2s ease; | |
} | |
.techwave_fn_interactive_list .item:hover{ | |
background-color: var(--techwave-some-a-bg-color); | |
border-color: var(--techwave-main-color); | |
} | |
.techwave_fn_interactive_list a{ | |
text-decoration: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
justify-content: center; | |
-ms-align-items: center; | |
align-items: center; | |
padding: 48px 30px; | |
min-height: 100%; | |
} | |
.techwave_fn_interactive_list .icon{ | |
width: 120px; | |
height: 120px; | |
border-radius: 100%; | |
background-color: var(--techwave-main-color); | |
position: relative; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
color: #fff; | |
margin-bottom: 26px; | |
} | |
.techwave_fn_interactive_list .icon .fn__svg{ | |
width: 50px; | |
height: 50px; | |
display: block; | |
} | |
.techwave_fn_interactive_list .title{ | |
margin: 0; | |
padding: 0; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
font-weight: 400; | |
font-size: 24px; | |
margin-bottom: 20px; | |
} | |
.techwave_fn_interactive_list .desc{ | |
margin: 0; | |
padding: 0; | |
font-family: var(--techwave-body-font-family); | |
color: var(--techwave-body-color); | |
font-weight: 400; | |
font-size: 16px; | |
line-height: 20px; | |
margin-bottom: 22px; | |
} | |
.techwave_fn_interactive_list .arrow{ | |
display: block; | |
width: 50px; | |
height: 14px; | |
color: var(--techwave-heading-color); | |
position: relative; | |
} | |
.techwave_fn_interactive_list .arrow:after{ | |
position: absolute; | |
content: ''; | |
height: 2px; | |
top: 50%; | |
margin-top: -1px; | |
background-color: var(--techwave-heading-color); | |
transition: all .3s ease; | |
right: 100%; | |
left: 0%; | |
margin-right: 0 | |
} | |
.techwave_fn_interactive_list .item:hover .arrow:after{ | |
right: 0; | |
margin-right: 4px; | |
left: 0; | |
} | |
.techwave_fn_interactive_list .item:hover .arrow .fn__svg{ | |
right: 0; | |
margin-right: 0; | |
} | |
.techwave_fn_interactive_list .arrow .fn__svg{ | |
width: 14px; | |
height: 14px; | |
display: block; | |
position: absolute; | |
right: 50%; | |
margin-right: -7px; | |
transition: all .3s ease; | |
} | |
.techwave_fn_interactive_list.modern{ | |
max-width: 700px; | |
margin: 0 auto; | |
} | |
.techwave_fn_interactive_list.modern li{ | |
width: 100%; | |
max-width: 100%; | |
} | |
.techwave_fn_interactive_list.modern a{ | |
-webkit-flex-direction: row; | |
-moz-flex-direction: row; | |
-ms-flex-direction: row; | |
-o-flex-direction: row; | |
flex-direction: row; | |
justify-content: flex-start; | |
padding: 18px 38px; | |
} | |
.techwave_fn_interactive_list.modern .desc{ | |
display: none; | |
} | |
.techwave_fn_interactive_list.modern .icon{ | |
margin-bottom: 0; | |
margin-right: 20px; | |
min-width: 60px; | |
width: 60px; | |
height: 60px; | |
} | |
.techwave_fn_interactive_list.modern .icon .fn__svg{ | |
width: 24px; | |
height: 24px; | |
} | |
.techwave_fn_interactive_list.modern .title{ | |
margin-bottom: 0; | |
margin-right: 20px; | |
font-size: 20px; | |
} | |
.techwave_fn_interactive_list.modern .arrow{ | |
margin-left: auto; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 14) Shortcode: Members | |
/*------------------------------------------------------------------*/ | |
.fn__members .item{ | |
position: relative; | |
padding-left: 22px; | |
font-size: 16px; | |
line-height: 24px; | |
min-height: 24px; | |
} | |
.fn__members .item{ | |
margin-bottom: 8px; | |
} | |
.fn__members .item:last-child{ | |
margin-bottom: 0; | |
} | |
.fn__members .circle{ | |
width: 12px; | |
height: 12px; | |
border-radius: 100%; | |
display: block; | |
background-color: var(--techwave-body-color); | |
position: absolute; | |
top: 6px; | |
left: 0; | |
} | |
.fn__members .active .circle{ | |
background-color: #45c569; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 15) Shortcode: Animated Title | |
/*------------------------------------------------------------------*/ | |
.fn__animated_text{ | |
opacity: 0; | |
} | |
.fn__animated_text.ready{ | |
opacity: 1; | |
} | |
.fn__animated_text span{ | |
animation: fn__animated_text 0.8s both; | |
} | |
.fn__animated_text em{ | |
opacity: 0; | |
} | |
@keyframes fn__animated_text { | |
0% { | |
opacity: 0; | |
} | |
65% { | |
opacity: 1; | |
text-shadow: 0 0 25px white; | |
} | |
75% { | |
opacity: 0.7; | |
} | |
100% { | |
opacity: 1 | |
} | |
} | |
/*------------------------------------------------------------------*/ | |
/* 16) Page Title | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_pagetitle{ | |
padding: 34px 40px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_pagetitle .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 22px; | |
line-height: 1.364; | |
font-weight: 600; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_pagetitle span{ | |
color: var(--techwave-body-color); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 17) Page: Changelog | |
/*------------------------------------------------------------------*/ | |
.change_log{ | |
padding: 40px 0; | |
} | |
.faq{ | |
padding: 40px 0; | |
} | |
.techwave_fn_changelog .changelog__item{ | |
border-radius: 5px; | |
border: 1px solid var(--techwave-border-color); | |
background-color: var(--techwave-some-r-bg-color); | |
margin-bottom: 40px; | |
} | |
.techwave_fn_changelog .changelog__item:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_changelog .item__header{ | |
padding: 24px 30px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
column-gap: 20px; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_changelog .item__ver{ | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 20px; | |
font-weight: 400; | |
} | |
.techwave_fn_changelog .item__date{ | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 11px; | |
font-weight: 500; | |
text-transform: uppercase; | |
} | |
.techwave_fn_changelog .item__content{ | |
padding: 40px 30px 34px; | |
} | |
.techwave_fn_changelog .item__group{ | |
margin-bottom: 34px; | |
} | |
.techwave_fn_changelog .item__group:last-child{ | |
margin-bottom: 0px; | |
} | |
.techwave_fn_changelog .item__title{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
margin-bottom: 15px; | |
} | |
.techwave_fn_changelog .item__title span{ | |
height: 18px; | |
line-height: 18px; | |
padding: 0 10px; | |
border-radius: 9px; | |
font-weight: 500; | |
max-width: 100%; | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
text-align: center; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-transform: uppercase; | |
font-size: 11px; | |
background-color: var(--techwave-some-a-bg-color); | |
padding-top: 1px; | |
} | |
.techwave_fn_changelog .item__list{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.techwave_fn_changelog .item__list li{ | |
position: relative; | |
min-height: 24px; | |
line-height: 24px; | |
font-size: 18px; | |
color: var(--techwave-body-color); | |
font-weight: 400; | |
padding-left: 15px; | |
margin-bottom: 8px; | |
} | |
.techwave_fn_changelog .item__list li:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_changelog .item__list li:after{ | |
content: ''; | |
position: absolute; | |
left: 0; | |
top: 11px; | |
height: 2px; | |
background-color: var(--techwave-body-color); | |
width: 5px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 18) Searchbar | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_searchbar{ | |
opacity: 0; | |
visibility: hidden; | |
transform: translateX(100px); | |
position: fixed; | |
top: 0; | |
left: var(--techwave-left-panel-width); | |
right: 0; | |
height: var(--techwave-header-height); | |
background-color: var(--techwave-header-bg-color); | |
padding: 0 40px; | |
z-index: 102; | |
transition: all .3s ease; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_searchbar.opened{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateX(0); | |
} | |
.techwave_fn_searchbar .search__results{ | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
position: absolute; | |
top: 100%; | |
left: 0; | |
right: 0; | |
border-bottom: 1px solid var(--techwave-border-color); | |
background-color: var(--techwave-header-bg-color); | |
margin-top: 1px; | |
padding: 46px 40px; | |
transition: all .2s ease; | |
} | |
.techwave_fn_searchbar .search__results.opened{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.techwave_fn_searchbar .search__input{ | |
height: var(--techwave-header-height); | |
padding: 0 50px 0 45px; | |
display: block; | |
width: 100%; | |
background-color: transparent ; | |
border: none ; | |
font-size: 16px; | |
font-weight: 400; | |
letter-spacing: 0; | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_searchbar .results__title{ | |
font-weight: 500; | |
text-transform: uppercase; | |
font-size: 11px; | |
margin: 0; | |
margin-bottom: 19px; | |
} | |
.techwave_fn_searchbar .search__icon{ | |
width: 24px; | |
height: 24px; | |
display: block; | |
position: absolute; | |
top: 50%; | |
margin-top: -12px; | |
left: 40px; | |
pointer-events: none; | |
} | |
.techwave_fn_searchbar .search__closer{ | |
text-decoration: none; | |
width: 30px; | |
height: 30px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
border-radius: 5px; | |
background-color: var(--techwave-some-a-bg-color); | |
position: absolute; | |
right: 40px; | |
top: 50%; | |
margin-top: -15px; | |
color: var(--techwave-heading-color); | |
} | |
.techwave_fn_searchbar .search__closer .fn__svg{ | |
width: 12px; | |
height: 12px; | |
} | |
.techwave_fn_searchbar .search__results ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.techwave_fn_searchbar .search__results li{ | |
font-weight: 400; | |
font-family: var(--techwave-heading-font-family); | |
font-size: 16px; | |
letter-spacing: 0; | |
color: var(--techwave-heading-color); | |
margin-bottom: 13px; | |
} | |
.techwave_fn_searchbar .search__results li:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_searchbar .search__results a{ | |
text-decoration: none; | |
color: var(--techwave-heading-color); | |
} | |
.techwave_fn_searchbar .search__results a:hover{ | |
color: var(--techwave-main-color); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 19) Shortcode: Accordion | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_accordion.small .acc__item{ | |
border-width: 1px; | |
} | |
.techwave_fn_accordion.small .acc__header{ | |
padding: 15px 20px; | |
} | |
.techwave_fn_accordion.small .acc__icon:after{ | |
width: 11px; | |
height: 1px; | |
right: 20px; | |
margin-top: -1px; | |
} | |
.techwave_fn_accordion.small .acc__icon:before{ | |
width: 1px; | |
height: 11px; | |
right: 25px; | |
margin-top: -6px; | |
} | |
.techwave_fn_accordion.small .acc__title{ | |
font-size: 14px; | |
text-transform: uppercase; | |
line-height: 20px; | |
} | |
.techwave_fn_accordion.small .acc__content{ | |
padding: 14px 20px; | |
} | |
.techwave_fn_accordion .acc__item{ | |
border: 2px solid var(--techwave-border-color); | |
background-color: var(--techwave-some-r-bg-color); | |
border-radius: 5px; | |
margin-bottom: 10px; | |
} | |
.techwave_fn_accordion .acc__item.opened .acc__header, | |
.techwave_fn_accordion .acc__item .acc__header:hover{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.techwave_fn_accordion .acc__item:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_accordion .acc__header{ | |
padding: 26px 30px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
column-gap: 20px; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
position: relative; | |
cursor: pointer; | |
transition: all .3s ease; | |
} | |
.techwave_fn_accordion .acc__title{ | |
margin: 0; | |
padding: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 20px; | |
font-weight: 400; | |
line-height: 1.25; | |
padding-right: 23px; | |
top: 1px; | |
} | |
.techwave_fn_accordion .acc__icon:after{ | |
width: 18px; | |
height: 2px; | |
background-color: var(--techwave-heading-color); | |
content: ''; | |
position: absolute; | |
right: 30px; | |
top: 50%; | |
margin-top: -1px; | |
} | |
.techwave_fn_accordion .opened .acc__icon:before{ | |
transform: scale(0) rotate(90deg); | |
} | |
.techwave_fn_accordion .acc__icon:before{ | |
width: 2px; | |
height: 18px; | |
background-color: var(--techwave-heading-color); | |
content: ''; | |
position: absolute; | |
right: 38px; | |
top: 50%; | |
margin-top: -9px; | |
transition: all .3s ease; | |
} | |
.techwave_fn_accordion .acc__content{ | |
padding: 24px 30px; | |
display: none; | |
overflow: hidden; | |
border-top: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_accordion .acc__content p{ | |
margin-bottom: 18px; | |
} | |
.techwave_fn_accordion .acc__content > *:last-child{ | |
margin-bottom: 0; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 20) Page: Community Feed | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_community_page{ | |
padding: 36px 0 40px 0; | |
} | |
.techwave_fn_community_page .fn__title_holder{ | |
margin-bottom: 28px; | |
} | |
.fn__title_holder .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 22px; | |
font-weight: 600; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 21) Tabs | |
/*------------------------------------------------------------------*/ | |
.fn__tabs{ | |
border-bottom: 1px solid var(--techwave-border-color); | |
margin-bottom: 30px; | |
} | |
.fn__tabs .tab_in{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
width: 100%; | |
flex-wrap: wrap; | |
} | |
.fn__tabs a{ | |
text-decoration: none; | |
font-size: 14px; | |
font-weight: 500; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-right: 30px; | |
line-height: 40px; | |
position: relative; | |
} | |
.fn__tabs a:after{ | |
content: ''; | |
opacity: 0; | |
position: absolute; | |
left: 50%; | |
bottom: -1px; | |
height: 2px; | |
background-color: var(--techwave-main-color); | |
right: 50%; | |
transition: all .3s ease; | |
} | |
.fn__tabs a.active:after{ | |
left: 0; | |
right: 0; | |
opacity: 1; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 22) Page: Personal Feed | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_feed .feed__filter{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
column-gap: 50px; | |
margin-bottom: 30px; | |
position: relative; | |
-ms-align-items: center; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_feed .filter__left{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
margin: 5px 0; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_feed .filter__upscaled{ | |
margin: 5px 0; | |
} | |
.techwave_fn_feed .filter__left > *{ | |
margin-right: 30px; | |
} | |
.techwave_fn_feed .filter__left > *:last-child{ | |
margin-right: 0; | |
} | |
.techwave_fn_feed .filter__search{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_feed .filter__search a{ | |
margin: 5px 0; | |
} | |
.techwave_fn_feed .filter__search input{ | |
margin: 5px 10px 5px 0; | |
} | |
.techwave_fn_feed .filter__sorting{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
margin-left: -10px; | |
} | |
.techwave_fn_feed .filter__sorting a{ | |
margin: 5px 0 5px 10px; | |
} | |
.fn__selection_box{ | |
display: none; | |
border-top: 1px solid var(--techwave-border-color); | |
border-bottom: 1px solid var(--techwave-border-color); | |
padding: 25px 0; | |
margin-bottom: 30px; | |
position: sticky; | |
top: var(--techwave-header-height); | |
z-index: 5; | |
background: var(--techwave-site-bg-color); | |
} | |
.fn__selection_box .desc{ | |
margin: 0; | |
padding: 0; | |
} | |
.fn__selection_box .selection_in{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.fn__selection_box .actions{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.fn__selection_box .actions a{ | |
margin: 5px 0 5px 10px; | |
} | |
.techwave_fn_feed .feed__results{ | |
margin-bottom: 60px; | |
position: relative; | |
} | |
.techwave_fn_feed .feed__results.loading .fn__gallery_items{ | |
opacity: 0; | |
visibility: hidden; | |
} | |
.techwave_fn_feed .feed__results.loading .fn__preloader{ | |
opacity: 1; | |
visibility: visible; | |
} | |
.techwave_fn_feed .feed__more{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: center; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 23) Shortcode: Gallery Items | |
/*------------------------------------------------------------------*/ | |
.fn__gallery_items{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
margin-left: -20px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.fn__gallery_items .item.select__ready .item__info{ | |
display: none; | |
} | |
.fn__gallery_items .item.select__ready .fn__selectable_item{ | |
opacity: 1; | |
visibility: visible; | |
pointer-events: all; | |
} | |
.fn__selectable_item{ | |
opacity: 0; | |
visibility: hidden; | |
pointer-events: none; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
z-index: 3; | |
color: var(--techwave-hover-color); | |
border: 2px solid transparent; | |
border-radius: 5px; | |
cursor: pointer; | |
} | |
.fn__selectable_item.selected{ | |
border-color: var(--techwave-main-color); | |
} | |
.fn__selectable_item.selected .icon{ | |
background-color: var(--techwave-main-color); | |
} | |
.fn__selectable_item.selected:after{ | |
opacity: 0.1; | |
} | |
.fn__selectable_item:after{ | |
background-color: var(--techwave-site-bg-color); | |
opacity: .6; | |
position: absolute; | |
top: -2px; | |
left: -2px; | |
right: -2px; | |
bottom: -2px; | |
content: ''; | |
} | |
.fn__selectable_item .icon{ | |
width: 50px; | |
height: 50px; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 100%; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: center; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.fn__selectable_item .fn__svg{ | |
position: relative; | |
z-index: 3; | |
} | |
.fn__gallery_item{ | |
margin: 0; | |
padding: 0; | |
padding-left: 20px; | |
width: 25%; | |
margin-bottom: 20px; | |
} | |
.fn__gallery_items .item{ | |
position: relative; | |
width: 100%; | |
overflow: hidden; | |
cursor: pointer; | |
} | |
.fn__gallery_items .img img{ | |
border-radius: 5px; | |
width: 100%; | |
height: 100%; | |
} | |
.fn__gallery_items .item:hover .item__info{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.fn__gallery_items .item__info{ | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
position: absolute; | |
bottom: 10px; | |
left: 10px; | |
right: 10px; | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
padding: 20px 15px 19px; | |
transition: all .3s ease; | |
} | |
.fn__gallery_items .info__header{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
margin-bottom: 14px; | |
-ms-align-items: center; | |
align-items: center; | |
column-gap: 15px; | |
} | |
.fn__gallery_items .user__info{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
max-width: 60%; | |
} | |
.fn__gallery_items .author_name{ | |
margin: 0; | |
padding: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 14px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.fn__gallery_items .user__info img{ | |
width: 20px; | |
height: 20px; | |
object-fit: cover; | |
border-radius: 100%; | |
margin-right: 7px; | |
} | |
.fn__gallery_items .item__info .desc{ | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
overflow: hidden; | |
display: -webkit-box; | |
-webkit-line-clamp: 3; | |
line-clamp: 3; | |
-webkit-box-orient: vertical; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 24) Like Button | |
/*------------------------------------------------------------------*/ | |
a.fn__like{ | |
text-decoration: none; | |
font-size: 14px; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
overflow: hidden; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
position: relative; | |
z-index: 25; | |
padding: 0 18px; | |
padding-right: 42px; | |
height: 40px; | |
border: 2px solid var(--techwave-some-a-bg-color); | |
border-radius: 20px; | |
line-height: 36px; | |
} | |
a.fn__like .count{ | |
position: relative; | |
top: 1px; | |
} | |
a.fn__like .fn__svg{ | |
position: absolute; | |
width: 18px; | |
height: 18px; | |
right: 18px; | |
top: 50%; | |
margin-top: -9px; | |
opacity: 0; | |
} | |
a.fn__like .empty__like{ | |
opacity: 1; | |
} | |
a.fn__like.has__like .empty__like{ | |
opacity: 0; | |
} | |
a.fn__like.has__like .full__like{ | |
opacity: 1; | |
color: var(--techwave-main-color); | |
} | |
a.fn__like:hover{ | |
opacity: .8; | |
} | |
a.fn__like.has__like{ | |
border-color: var(--techwave-main-color); | |
} | |
a.fn__like.no_border{ | |
border: none; | |
padding: 0 24px 0 0; | |
line-height: 16px; | |
border-radius: 0; | |
height: 16px; | |
} | |
a.fn__like.no_border .fn__svg{ | |
right: 0; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 25) Checkbox | |
/*------------------------------------------------------------------*/ | |
.fn__checkbox{ | |
margin: 0; | |
padding: 0; | |
position: relative; | |
min-height: 20px; | |
line-height: 20px; | |
padding-left: 27px; | |
font-size: 16px; | |
font-weight: 400; | |
border: none; | |
outline: none; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
} | |
.fn__checkbox .fn__svg{ | |
opacity: 0; | |
width: 12px; | |
height: 12px; | |
position: absolute; | |
left: 4px; | |
top: 50%; | |
margin-top: -6px; | |
border-color: var(--techwave-main-color); | |
} | |
.fn__checkbox input{ | |
position: absolute; | |
opacity: 0; | |
cursor: pointer; | |
height: 0; | |
width: 0; | |
} | |
.fn__checkbox input:checked ~ .fn__svg{ | |
opacity: 1; | |
} | |
.fn__checkbox input:checked ~ .checkmark { | |
border-color: var(--techwave-main-color); | |
} | |
.fn__checkbox .checkmark{ | |
width: 20px; | |
height: 20px; | |
display: block; | |
position: absolute; | |
top: 50%; | |
margin-top: -10px; | |
left: 0; | |
border: 2px solid var(--techwave-border-color); | |
border-radius: 3px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 26) Image Lightbox | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_img_lightbox{ | |
opacity: 0; | |
visibility: hidden; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 105; | |
background-color: var(--techwave-site-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
overflow-y: auto; | |
pointer-events: none; | |
transition: all .3s ease; | |
} | |
.techwave_fn_img_lightbox.opened{ | |
opacity: 1; | |
visibility: visible; | |
pointer-events: all; | |
} | |
.techwave_fn_img_lightbox .lightbox__top{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_img_lightbox .lightbox__tl{ | |
width: 70%; | |
width: calc(100% - 440px); | |
} | |
.techwave_fn_img_lightbox .lightbox__tr{ | |
width: 30%; | |
width: 440px; | |
border-left: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_img_lightbox .lightbox__tlbar{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
padding: 20px; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_img_lightbox .lightbox__tlbar_left{ | |
flex: 3; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_img_lightbox .lightbox__tlbar_left .item{ | |
margin: 2.5px 5px 2.5px 0; | |
} | |
.techwave_fn_img_lightbox .lightbox__tlbar_center{ | |
flex: 2; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
column-gap: 5px; | |
} | |
.techwave_fn_img_lightbox .lightbox__tlbar_right{ | |
flex: 3; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: flex-end; | |
} | |
.techwave_fn_img_lightbox .img_nav{ | |
text-decoration: none; | |
width: 40px; | |
height: 40px; | |
border: 2px solid var(--techwave-some-a-bg-color); | |
border-radius: 100%; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
color: var(--techwave-heading-color); | |
} | |
.techwave_fn_img_lightbox .img_nav:hover{ | |
border-color: var(--techwave-main-color); | |
} | |
.techwave_fn_img_lightbox .img_nav .fn__svg{ | |
width: 12px; | |
height: 12px; | |
} | |
.techwave_fn_img_lightbox .img_nav.nav_prev .fn__svg{ | |
transform: rotate(180deg); | |
} | |
.techwave_fn_img_lightbox .lightbox__tlimg{ | |
padding: 0 40px 60px; | |
text-align: center; | |
} | |
.techwave_fn_img_lightbox .user__profile{ | |
padding: 20px 70px 20px 20px; | |
position: relative; | |
position: sticky; | |
top: 0; | |
background-color: var(--techwave-site-bg-color); | |
z-index: 2; | |
border-bottom: 1px solid var(--techwave-border-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
width: 100%; | |
} | |
.techwave_fn_img_lightbox .user__profile .profile_link{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
text-decoration: none; | |
-ms-align-items: center; | |
align-items: center; | |
margin-right: 10px; | |
max-width: 55%; | |
} | |
.techwave_fn_img_lightbox .user__profile .profile_link .user_name{ | |
margin: 0; | |
padding: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
font-size: 16px; | |
} | |
.techwave_fn_img_lightbox .user__profile .profile_link img{ | |
min-width: 40px; | |
width: 40px; | |
height: 40px; | |
border-radius: 100%; | |
margin-right: 10px; | |
object-fit: cover; | |
} | |
.techwave_fn_img_lightbox .fn__closer{ | |
position: absolute; | |
right: 20px; | |
top: 50%; | |
margin-top: -15px; | |
} | |
.techwave_fn_img_lightbox .item__details{ | |
padding: 20px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_img_lightbox .item__details > *{ | |
margin-bottom: 10px; | |
} | |
.techwave_fn_img_lightbox .item__details > *:last-child{ | |
margin-bottom: 0px; | |
} | |
.techwave_fn_img_lightbox .lightbox__related{ | |
padding: 36px 40px 20px; | |
} | |
.techwave_fn_img_lightbox .lightbox__related .fn__title_holder{ | |
margin-bottom: 33px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 27) Follow Button | |
/*------------------------------------------------------------------*/ | |
.fn__follow{ | |
padding: 0 10px; | |
position: relative; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
height: 24px; | |
white-space: nowrap; | |
max-width: 100%; | |
text-decoration: none; | |
background-color: var(--techwave-some-a-bg-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 11px; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
border-radius: 12px; | |
line-height: 24px; | |
color: var(--techwave-body-color); | |
font-weight: 400; | |
} | |
.fn__follow:hover{ | |
opacity: .8; | |
} | |
.fn__follow.has__follow{ | |
background-color: #f1416c; | |
color: #fff; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 28) Icon Button | |
/*------------------------------------------------------------------*/ | |
.fn__icon_button{ | |
width: 30px; | |
height: 30px; | |
border-radius: 5px; | |
background-color: var(--techwave-some-a-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
color: var(--techwave-heading-color); | |
} | |
.fn__icon_button .dots{ | |
display: block; | |
position: relative; | |
width: 15px; | |
height: 3px; | |
border-left: 3px solid var(--techwave-heading-color); | |
border-right: 3px solid var(--techwave-heading-color); | |
} | |
.fn__icon_button .dots:after{ | |
width: 3px; | |
top: 0; | |
bottom: 0; | |
left: 3px; | |
content: ''; | |
position: absolute; | |
background-color: var(--techwave-heading-color); | |
} | |
.fn__icon_button:hover{ | |
opacity: .8; | |
} | |
.fn__icon_button .fn__svg{ | |
width: 12px; | |
height: 12px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 29) Model Button (used in image lightbox) | |
/*------------------------------------------------------------------*/ | |
.fn__model{ | |
position: relative; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
padding: 10px 70px 10px 20px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.fn__model .fn__icon_button{ | |
position: absolute; | |
right: 20px; | |
top: 50%; | |
margin-top: -15px; | |
} | |
.fn__model .model_img img{ | |
width: 60px; | |
height: 60px; | |
object-fit: cover; | |
border-radius: 5px; | |
margin-right: 15px; | |
} | |
.fn__model .model_subtitle{ | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
letter-spacing: .5px; | |
font-size: 11px; | |
text-transform: uppercase; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
margin-bottom: 5px; | |
} | |
.fn__model .model_title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 30) Prompt Details (used in image lightbox) | |
/*------------------------------------------------------------------*/ | |
.fn__prompt_details{ | |
position: relative; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
} | |
.fn__prompt_details .prompt__content{ | |
padding: 0 20px 15px 20px; | |
} | |
.fn__prompt_details .prompt__content p{ | |
margin: 0; | |
font-size: 16px; | |
line-height: 20px; | |
} | |
.fn__prompt_details .prompt__text{ | |
margin: 0; | |
padding: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 14px; | |
font-weight: 400; | |
line-height: 20px; | |
text-transform: uppercase; | |
} | |
.fn__prompt_details .prompt__options:hover .prompt__popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.fn__prompt_details .prompt__popup{ | |
right: 0; | |
position: absolute; | |
top: 100%; | |
padding-top: 5px; | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
transition: all .3s ease; | |
} | |
.fn__prompt_details .prompt__popup ul{ | |
width: 180px; | |
list-style-type: none; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 5px; | |
margin: 0; | |
padding: 15px 20px; | |
} | |
.fn__prompt_details .prompt__popup a{ | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-decoration: none; | |
overflow: hidden; | |
} | |
.fn__prompt_details .prompt__popup a:hover{ | |
color: var(--techwave-main-color); | |
} | |
.fn__prompt_details .prompt__popup li{ | |
margin: 0; | |
margin-bottom: 3px; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__prompt_details .prompt__popup li:last-child{ | |
margin-bottom: 0; | |
} | |
.fn__prompt_details .prompt__options{ | |
position: absolute; | |
top: 50%; | |
right: 20px; | |
margin-top: -15px; | |
} | |
.fn__prompt_details .prompt__header{ | |
position: relative; | |
padding: 15px 70px 10px 20px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 31) Detailed list (used in image lightbox) | |
/*------------------------------------------------------------------*/ | |
.fn__details_list{ | |
padding: 27px 30px 3px; | |
} | |
.fn__details_list ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
margin-left: -30px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.fn__details_list li{ | |
padding-left: 30px; | |
margin-bottom: 20px; | |
width: 50%; | |
} | |
.fn__details_list .sub_title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
letter-spacing: .5px; | |
font-size: 11px; | |
text-transform: uppercase; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
margin-bottom: 1px; | |
} | |
.fn__details_list .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 32) Grid Items (used in image lightbox) | |
/*------------------------------------------------------------------*/ | |
.fn__grid_items ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin-left: -20px; | |
} | |
.fn__grid_items li{ | |
padding-left: 20px; | |
margin-bottom: 20px; | |
width: 16.6666%; | |
} | |
.fn__grid_items img{ | |
border-radius: 5px; | |
display: block; | |
width: 100%; | |
height: 100%; | |
aspect-ratio: 1 / 1; | |
object-fit: cover; | |
transition: all .3s ease; | |
} | |
.fn__grid_items img:hover{ | |
-webkit-filter: brightness(.5); | |
filter: brightness(.5); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 33) Reportbox | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_report{ | |
pointer-events: none; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 110; | |
opacity: 0; | |
visibility: hidden; | |
background-color: var(--techwave-site-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
overflow-y: auto; | |
padding: 40px; | |
} | |
.techwave_fn_report.opened{ | |
pointer-events: all; | |
opacity: 1; | |
visibility: visible; | |
} | |
.techwave_fn_report .report__closer{ | |
z-index: 1; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
} | |
.techwave_fn_report .report__content{ | |
width: 600px; | |
max-width: 100%; | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
padding: 30px; | |
padding-bottom: 25px; | |
position: relative; | |
border: 1px solid var(--techwave-border-color); | |
z-index: 3; | |
} | |
.techwave_fn_report .fn__closer{ | |
position: absolute; | |
right: 30px; | |
top: 30px; | |
z-index: 2; | |
} | |
.techwave_fn_report .title{ | |
text-align: center; | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
font-size: 24px; | |
letter-spacing: 0; | |
margin-bottom: 4px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_report .subtitle{ | |
display: block; | |
margin: 0; | |
padding: 0; | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 40px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_report .reason_field{ | |
display: block; | |
width: 100%; | |
margin-bottom: 15px; | |
height: 50px; | |
border-radius: 5px; | |
} | |
.techwave_fn_report .btns{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.techwave_fn_report .btns .cancel{ | |
opacity: .6; | |
} | |
.techwave_fn_report .btns a{ | |
margin: 5px 10px 5px 0; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 34) Ajax Loader (Loading) | |
/*------------------------------------------------------------------*/ | |
.fn__preloader{ | |
opacity: 0; | |
visibility: hidden; | |
position: absolute; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
width: 100%; | |
height: 150px; | |
border: 2px solid var(--techwave-border-color); | |
top: 0; | |
left: 0; | |
z-index: 1; | |
} | |
.fn__preloader .text{ | |
display: block; | |
font-size: 18px; | |
letter-spacing: .25px; | |
text-transform: uppercase; | |
font-family: var(--techwave-heading-font-family); | |
font-weight: 600; | |
color: var(--techwave-heading-color); | |
} | |
.fn__preloader .icon{ | |
width: 60px; | |
height: 60px; | |
display: block; | |
border: 4px solid transparent; | |
border-top-color: var(--techwave-hover-color); | |
border-right-color: var(--techwave-hover-color); | |
border-bottom-color: var(--techwave-hover-color); | |
border-radius: 100%; | |
animation: techwave_spin 1s linear infinite; | |
margin-bottom: 15px; | |
} | |
.fn__preloader.loading{ | |
opacity: 1; | |
visibility: visible; | |
} | |
@keyframes techwave_spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
-ms-transform: rotate(0deg); | |
transform: rotate(0deg); | |
} | |
100% { | |
-webkit-transform: rotate(360deg); | |
-ms-transform: rotate(360deg); | |
transform: rotate(360deg); | |
} | |
} | |
/*------------------------------------------------------------------*/ | |
/* 35) Page: Sign In and Sign Up | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_sign{ | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 110; | |
background-color: var(--techwave-site-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
overflow-y: auto; | |
padding: 50px 40px; | |
} | |
.techwave_fn_sign .logo{ | |
background-image: none,url(../img/logo-desktop-full.png); | |
background-size: 141px; | |
background-position: center top; | |
background-repeat: no-repeat; | |
color: #3c434a; | |
height: 17px; | |
font-size: 20px; | |
font-weight: 400; | |
line-height: 1.3; | |
margin: 0 auto 50px; | |
padding: 0; | |
text-decoration: none; | |
width: 141px; | |
text-indent: -9999px; | |
outline: 0; | |
overflow: hidden; | |
display: block; | |
} | |
.techwave_fn_sign .sign__desc p{ | |
margin: 0; | |
margin-top: 25px; | |
text-align: center; | |
font-size: 14px; | |
line-height: 18px; | |
letter-spacing: 0; | |
font-family: var(--techwave-body-font-family); | |
color: var(--techwave-body-color); | |
} | |
.techwave_fn_sign .sign__desc p a{ | |
text-decoration: none; | |
color: var(--techwave-heading-color); | |
} | |
.techwave_fn_sign .sign__desc p a:hover{ | |
text-decoration: underline; | |
} | |
.techwave_fn_sign .sign__content{ | |
width: 500px; | |
max-width: 100%; | |
} | |
.techwave_fn_sign .form__content{ | |
width: 100%; | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
padding: 36px 50px 40px 50px; | |
position: relative; | |
border: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_sign .form__email, | |
.techwave_fn_sign .form__name, | |
.techwave_fn_sign .form__username{ | |
margin-bottom: 17px; | |
} | |
.techwave_fn_sign .pass_lab{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: space-between; | |
} | |
.techwave_fn_sign .pass_lab a{ | |
font-size: 16px; | |
text-decoration: none; | |
font-family: var(--techwave-body-font-family); | |
color: var(--techwave-main-color); | |
line-height: 40px; | |
} | |
.techwave_fn_sign .pass_lab a:hover{ | |
text-decoration: underline; | |
} | |
.techwave_fn_sign .form__title{ | |
text-align: center; | |
font-size: 24px; | |
margin: 0; | |
font-weight: 500; | |
font-family: var(--techwave-body-font-family); | |
color: var(--techwave-heading-color); | |
line-height: 1; | |
margin-bottom: 3px; | |
} | |
.techwave_fn_sign label{ | |
display: block; | |
font-size: 16px; | |
font-weight: 400; | |
font-family: var(--techwave-body-font-family); | |
color: var(--techwave-heading-color); | |
line-height: 40px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.techwave_fn_sign input[type="text"], | |
.techwave_fn_sign input[type="password"]{ | |
display: block; | |
width: 100%; | |
border-radius: 5px; | |
height: 60px; | |
min-width: 100%; | |
} | |
.techwave_fn_sign .fn__lined_text{ | |
margin-bottom: 14px; | |
} | |
.fn__lined_text{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
width: 100%; | |
} | |
.fn__lined_text .line{ | |
width: 50%; | |
height: 1px; | |
background-color: var(--techwave-border-color); | |
} | |
.fn__lined_text .text{ | |
white-space: nowrap; | |
font-size: 14px; | |
text-transform: uppercase; | |
margin: 0; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-body-font-family); | |
padding: 0 10px; | |
} | |
.techwave_fn_sign .form__alternative a{ | |
width: 100%; | |
} | |
.techwave_fn_sign .form__submit{ | |
margin-bottom: 14px; | |
} | |
.techwave_fn_sign .form__pass{ | |
margin-bottom: 30px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 36) Select Filter (personal feed page) | |
/*------------------------------------------------------------------*/ | |
.filter__select{ | |
position: relative; | |
z-index: 5; | |
} | |
.filter__select .item__popup{ | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
position: absolute; | |
right: 0; | |
top: 100%; | |
width: 140px; | |
margin: 0; | |
padding: 0; | |
padding-top: 5px; | |
transition: all .3s ease; | |
} | |
.filter__select:hover .item__popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.filter__select .item__popup ul{ | |
list-style-type: none; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 5px; | |
margin: 0; | |
padding: 15px 20px; | |
} | |
.filter__select .item__popup li:last-child{ | |
margin-bottom: 0; | |
} | |
.filter__select .item__popup li{ | |
margin: 0; | |
margin-bottom: 3px; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.filter__select .item__popup a{ | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-decoration: none; | |
overflow: hidden; | |
} | |
.filter__select .item__popup a:hover{ | |
color: var(--techwave-main-color); | |
opacity: .9; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 37) Page: Notifications | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_notifications_content{ | |
padding: 40px 0; | |
} | |
.techwave_fn_notifications_list .notification__item:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_notifications_list .notification__item{ | |
padding: 24px 30px; | |
border-radius: 5px; | |
border: 1px solid var(--techwave-border-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
column-gap: 20px; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
background-color: var(--techwave-some-r-bg-color); | |
margin-bottom: 10px; | |
position: relative; | |
transition: all .3s ease; | |
} | |
.techwave_fn_notifications_list .notification__item:hover{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.techwave_fn_notifications_list .item__title{ | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 20px; | |
font-weight: 400; | |
margin: 0; | |
padding: 0; | |
} | |
.techwave_fn_notifications_list .item__date{ | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 11px; | |
font-weight: 500; | |
text-transform: uppercase; | |
} | |
.techwave_fn_notification_single_content{ | |
padding: 40px 0; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 38) Back To button (notification single page) | |
/*------------------------------------------------------------------*/ | |
.fn__backto{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.fn__backto a{ | |
text-decoration: none; | |
height: 30px; | |
line-height: 30px; | |
position: relative; | |
padding-left: 30px; | |
padding-right: 13px; | |
border-radius: 5px; | |
font-size: 16px; | |
letter-spacing: 0; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
font-weight: 400; | |
display: block; | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.fn__backto a:hover{ | |
color: var(--techwave-main-color); | |
} | |
.fn__backto a .text{ | |
position: relative; | |
top: 1px; | |
} | |
.fn__backto a .fn__svg{ | |
transform: rotate(180deg); | |
width: 12px; | |
height: 12px; | |
left: 10px; | |
top: 50%; | |
margin-top: -6px; | |
position: absolute; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 39) Page: Pricing | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_pricing_page{ | |
padding: 93px 0px 100px; | |
} | |
.techwave_fn_pricing_page .techwave_fn_title_holder{ | |
margin-bottom: 43px; | |
} | |
.techwave_fn_pricing_page .techwave_fn_pricing{ | |
margin-bottom: 111px; | |
} | |
.techwave_fn_pricing .pricing__tab{ | |
display: none; | |
} | |
.techwave_fn_pricing .pricing__tab.active{ | |
display: block; | |
} | |
.techwave_fn_pricing .pricing__toggle{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
margin-bottom: 40px; | |
} | |
.techwave_fn_pricing .pricing__toggle .bg{ | |
position: absolute; | |
height: 40px; | |
top: 9px; | |
left: 50%; | |
border-radius: 20px; | |
background-color: var(--techwave-some-a-bg-color); | |
z-index: 1; | |
transition: all .3s ease; | |
width: 0; | |
} | |
.techwave_fn_pricing .pricing__toggle .toggle_in{ | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 60px; | |
padding: 9px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
position: relative; | |
} | |
.techwave_fn_pricing .pricing__toggle a{ | |
text-decoration: none; | |
height: 40px; | |
line-height: 40px; | |
padding: 0 35px; | |
font-size: 14px; | |
margin: 0; | |
font-weight: 500; | |
text-transform: uppercase; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
position: relative; | |
z-index: 2; | |
} | |
.techwave_fn_pricing .pricing__toggle a:hover{ | |
color: var(--techwave-main-color); | |
} | |
.techwave_fn_pricing .pricing__content{ | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
} | |
.techwave_fn_pricing .popular{ | |
position: absolute; | |
top: 0; | |
margin-top: -16px; | |
background-color: #ab0cdf; | |
height: 30px; | |
border-radius: 15px; | |
font-weight: 500; | |
color: #fff; | |
letter-spacing: 0; | |
text-transform: uppercase; | |
font-family: var(--techwave-heading-font-family); | |
padding: 0 18px; | |
font-size: 14px; | |
line-height: 30px; | |
left: 50%; | |
transform: translateX(-50%); | |
text-align: center; | |
z-index: 3; | |
} | |
.techwave_fn_pricing .popular *{ | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
max-width: 100%; | |
display: block; | |
} | |
.techwave_fn_pricing .popular:after{ | |
content: ''; | |
left: 50%; | |
margin-left: -6px; | |
top: 100%; | |
width: 0; | |
height: 0; | |
border-style: solid; | |
border-width: 4px 6px 0 6px; | |
border-color: #ab0cdf transparent transparent transparent; | |
position: absolute; | |
} | |
.techwave_fn_pricing .item_row{ | |
margin-left: -1px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
text-align: center; | |
} | |
.techwave_fn_pricing .item_row .item_col:nth-child(1){ | |
width: 31%; | |
max-width: 31%; | |
text-align: left; | |
justify-content: flex-start; | |
} | |
.techwave_fn_pricing .item_row .item_col{ | |
width: 23%; | |
max-width: 23%; | |
border-left: 1px solid var(--techwave-border-color); | |
position: relative; | |
} | |
.techwave_fn_pricing .pricing__header .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 24px; | |
letter-spacing: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 10px; | |
} | |
.techwave_fn_pricing .pricing__header .price{ | |
margin: 0; | |
padding: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 14px; | |
font-weight: 500; | |
margin-bottom: 11px; | |
} | |
.techwave_fn_pricing .pricing__header .price span{ | |
font-size: 36px; | |
font-weight: 500; | |
} | |
.techwave_fn_pricing .pricing__header .desc{ | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
letter-spacing: 0; | |
line-height: 20px; | |
font-weight: 400; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 24px; | |
} | |
.techwave_fn_pricing .pricing__header .desc span{ | |
color: var(--techwave-heading-color); | |
} | |
.techwave_fn_pricing .pricing__header .purchase{ | |
padding: 0; | |
margin: 0; | |
} | |
.techwave_fn_pricing .pricing__header .purchase a{ | |
width: 100%; | |
} | |
.techwave_fn_pricing .pricing__header .item_col{ | |
padding: 35px 30px 40px 30px; | |
} | |
.techwave_fn_pricing .pricing__heading{ | |
background-color: var(--techwave-some-a-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
margin: 0 -1px; | |
} | |
.techwave_fn_pricing .pricing__heading .item.wide{ | |
width: 69%; | |
max-width: 69%; | |
} | |
.techwave_fn_pricing .pricing__heading .item{ | |
height: 54px; | |
position: relative; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
padding: 0 30px; | |
} | |
.techwave_fn_pricing .pricing__heading .item{ | |
width: 31%; | |
max-width: 31%; | |
} | |
.techwave_fn_pricing .pricing__heading .title{ | |
font-size: 14px; | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_pricing .pricing__heading .item_col:first-child{ | |
padding: 0 40px; | |
} | |
.techwave_fn_pricing .pricing__heading .item.wide:after{ | |
content: ''; | |
left: 30px; | |
right: 30px; | |
position: absolute; | |
height: 4px; | |
border-radius: 5px; | |
top: 50%; | |
margin-top: -2px; | |
background-color: var(--techwave-site-bg-color); | |
} | |
.techwave_fn_pricing .pricing__fields .item_row:nth-child(1) .item_col{ | |
padding-top: 35px; | |
} | |
.techwave_fn_pricing .pricing__fields .item_row:last-child .item_col{ | |
padding-bottom: 24px; | |
} | |
.techwave_fn_pricing .pricing__fields .item_col{ | |
padding: 9px 30px; | |
line-height: 24px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.techwave_fn_pricing .pricing__fields .option_text{ | |
font-size: 16px; | |
margin: 0; | |
padding: 0; | |
letter-spacing: .5px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_pricing .pricing__fields .heading_text{ | |
font-size: 16px; | |
margin: 0; | |
padding: 0; | |
letter-spacing: .5px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_pricing .pricing__footer{ | |
border-top: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_pricing .pricing__footer .item_col{ | |
padding: 40px 30px; | |
} | |
.techwave_fn_pricing .pricing__footer a{ | |
width: 100%; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 40) Shortcode: Pricing Mobile | |
/*------------------------------------------------------------------*/ | |
.fn__mobile_pricing{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
display: none; | |
flex-wrap: wrap; | |
margin-left: -20px; | |
text-align: center; | |
} | |
.fn__mobile_pricing .pricing__item{ | |
width: 33.3333%; | |
padding-left: 20px; | |
margin-bottom: 20px; | |
} | |
.fn__mobile_pricing .pricing__item_holder{ | |
width: 100%; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
position: relative; | |
} | |
.fn__mobile_pricing .pricing__item__header{ | |
padding: 35px 10px 40px 10px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
justify-content: center; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.fn__mobile_pricing .pricing__item__header .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 24px; | |
letter-spacing: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 10px; | |
} | |
.fn__mobile_pricing .pricing__item__header .price{ | |
margin: 0; | |
padding: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 14px; | |
font-weight: 500; | |
margin-bottom: 11px; | |
} | |
.fn__mobile_pricing .pricing__item__header .price span{ | |
font-size: 36px; | |
font-weight: 500; | |
} | |
.fn__mobile_pricing .pricing__item__header .desc{ | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
letter-spacing: 0; | |
line-height: 20px; | |
font-weight: 400; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 24px; | |
} | |
.fn__mobile_pricing .pricing__item__header .desc span{ | |
color: var(--techwave-heading-color); | |
} | |
.fn__mobile_pricing .pricing__item__header .purchase{ | |
padding: 0; | |
margin: 0; | |
} | |
.fn__mobile_pricing .pricing__item__header .purchase a{ | |
width: 100%; | |
} | |
.fn__mobile_pricing .pricing__item__heading{ | |
background-color: var(--techwave-some-a-bg-color); | |
padding: 0 10px; | |
text-align: center; | |
height: 40px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.fn__mobile_pricing .pricing__item__heading .title{ | |
font-size: 14px; | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__mobile_pricing .pricing__item_list{ | |
padding: 10px 0px; | |
} | |
.fn__mobile_pricing .pricing__item_list_item{ | |
padding: 7px 10px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: space-between; | |
column-gap: 20px; | |
} | |
.fn__mobile_pricing .pricing__item_list .title{ | |
font-size: 14px; | |
margin: 0; | |
padding: 0; | |
letter-spacing: .5px; | |
font-weight: 400; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
text-align: left; | |
} | |
.fn__mobile_pricing .pricing__item_list .desc{ | |
font-size: 16px; | |
margin: 0; | |
padding: 0; | |
letter-spacing: .5px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-align: right; | |
white-space: nowrap; | |
} | |
.fn__mobile_pricing .pricing__item_footer{ | |
padding: 30px 10px; | |
border-top: 1px solid var(--techwave-border-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 41) Page: User Profile | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_user_profile{ | |
padding: 40px 0; | |
} | |
.techwave_fn_user_profile .user__profile{ | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
position: relative; | |
padding: 30px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
margin-bottom: 10px; | |
} | |
.techwave_fn_user_profile .user__profile .user_edit{ | |
position: absolute; | |
top: 30px; | |
right: 30px; | |
} | |
.techwave_fn_user_profile .user__profile .user_edit .fn__svg{ | |
width: 16px; | |
height: 16px; | |
} | |
.techwave_fn_user_profile .user__profile .user_avatar{ | |
width: 200px; | |
min-width: 200px; | |
margin-right: 30px; | |
} | |
.techwave_fn_user_profile .user__profile .user_avatar img{ | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
aspect-ratio: 1 / 1; | |
border-radius: 5px; | |
} | |
.techwave_fn_user_profile .user__profile .user_details ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin-left: -20px; | |
} | |
.techwave_fn_user_profile .user__profile .user_details li{ | |
margin: 11px 0; | |
padding: 0; | |
width: 50%; | |
padding-left: 20px; | |
} | |
.techwave_fn_user_profile .user__profile .subtitle{ | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
letter-spacing: .5px; | |
font-size: 11px; | |
text-transform: uppercase; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
margin-bottom: 7px; | |
} | |
.techwave_fn_user_profile .user__profile .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_user_profile .user__plan{ | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
position: relative; | |
padding: 38px 30px 33px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: space-between; | |
margin-bottom: 38px; | |
column-gap: 30px; | |
} | |
.techwave_fn_user_profile .user__plan .subtitle{ | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
letter-spacing: .5px; | |
font-size: 11px; | |
text-transform: uppercase; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
margin-bottom: 4px; | |
} | |
.techwave_fn_user_profile .user__plan .info{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_user_profile .user__plan .info span{ | |
color: var(--techwave-heading-color); | |
} | |
.techwave_fn_user_profile .user__interests .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 14px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 42) Shortcode: Options list (used in user profile page) | |
/*------------------------------------------------------------------*/ | |
.fn__options_list ul{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
margin-left: -10px; | |
} | |
.fn__options_list li{ | |
padding-left: 10px; | |
margin-bottom: 10px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 43) Page: User Settings | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_user_settings{ | |
padding: 40px 0; | |
} | |
.techwave_fn_user_settings .user__settings{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
column-gap: 40px; | |
} | |
.techwave_fn_user_settings .settings_left{ | |
width: 300px; | |
max-width: 50%; | |
} | |
.techwave_fn_user_settings .settings_right{ | |
flex: auto; | |
max-width: 50%; | |
} | |
.techwave_fn_user_settings .input_label{ | |
display: block; | |
font-size: 16px; | |
font-weight: 400; | |
font-family: var(--techwave-body-font-family); | |
color: var(--techwave-heading-color); | |
line-height: 40px; | |
white-space: nowrap; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
} | |
.techwave_fn_user_settings .input_item{ | |
position: relative; | |
} | |
.techwave_fn_user_settings .input_item .email{ | |
margin: 0; | |
padding: 0; | |
position: absolute; | |
top: 50%; | |
margin-top: -15px; | |
border-radius: 5px; | |
display: block; | |
width: 30px; | |
height: 30px; | |
background-color: var(--techwave-some-a-bg-color); | |
left: 12px; | |
color: var(--techwave-main-color); | |
line-height: 30px; | |
text-align: center; | |
font-size: 16px; | |
font-family: var(--techwave-body-font-family); | |
pointer-events: none; | |
} | |
.techwave_fn_user_settings .input{ | |
display: block; | |
width: 100%; | |
border-radius: 5px; | |
height: 60px; | |
} | |
.techwave_fn_user_settings .settings_right .fn__checkbox{ | |
margin: 30px 0; | |
display: block; | |
width: fit-content; | |
max-width: 100%; | |
} | |
.techwave_fn_user_settings .settings_right .item{ | |
margin-bottom: 17px; | |
} | |
.techwave_fn_user_settings .settings_right .item:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_user_settings #username{ | |
padding-left: 50px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 44) Upload Button | |
/*------------------------------------------------------------------*/ | |
.fn__upload{ | |
cursor: pointer; | |
text-align: center; | |
width: 100%; | |
aspect-ratio: 1 / 1; | |
border: 2px dashed var(--techwave-border-color); | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
padding: 46px; | |
transition: all .3s ease; | |
position: relative; | |
display: block; | |
overflow: hidden; | |
} | |
.fn__upload .upload_content{ | |
width: 100%; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
justify-content: center; | |
-ms-align-items: center; | |
align-items: center; | |
min-height: 100%; | |
} | |
.fn__upload.has_img{ | |
border-color: var(--techwave-main-color); | |
} | |
.fn__upload.has_img .upload_content{ | |
opacity: 0; | |
} | |
.fn__upload .upload_preview{ | |
opacity: 0; | |
visibility: hidden; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
position: absolute; | |
left: 0; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.fn__upload.has_img .upload_preview{ | |
opacity: 1; | |
visibility: visible; | |
} | |
.fn__upload:hover{ | |
opacity: .8; | |
} | |
.fn__upload .preview_img{ | |
object-fit: cover; | |
} | |
.fn__upload .preview_img[src="#"]{ | |
opacity: 0; | |
} | |
.fn__upload input[type="file"]{ | |
z-index: 2; | |
position: absolute; | |
top: 0; | |
left: 0; | |
opacity: 0; | |
width: 100%; | |
height: 100%; | |
display: block; | |
cursor: pointer; | |
} | |
.fn__upload .upload_content .fn__svg{ | |
width: 70px; | |
height: auto; | |
color: var(--techwave-heading-color); | |
margin-bottom: 15px; | |
} | |
.fn__upload .upload_content .fn__lined_text{ | |
margin-bottom: 4px; | |
} | |
.fn__upload .upload_content .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 3px; | |
} | |
.fn__upload .upload_content .desc{ | |
margin: 0; | |
padding: 0; | |
padding-top: 6px; | |
font-size: 12px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__upload .fn__closer{ | |
position: absolute; | |
right: 10px; | |
top: 10px; | |
z-index: 3; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 45) Page: User Billing | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_user_billing{ | |
padding: 40px 0; | |
} | |
.techwave_fn_user_billing .billing__plan{ | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
position: relative; | |
padding: 28px 30px 23px; | |
margin-bottom: 10px; | |
} | |
.techwave_fn_user_billing .billing__plan .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 4px; | |
} | |
.techwave_fn_user_billing .billing__plan .desc{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_user_billing .billing__plan .plan{ | |
position: absolute; | |
left: 30px; | |
top: -10px; | |
display: block; | |
height: 20px; | |
padding: 0 15px; | |
background-color: var(--techwave-main-color); | |
color: #fff; | |
font-family: var(--techwave-heading-font-family); | |
font-weight: 500; | |
font-size: 11px; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
line-height: 20px; | |
border-radius: 10px; | |
} | |
.techwave_fn_user_billing .billing__plan .plan *{ | |
position: relative; | |
top: 1px; | |
} | |
.techwave_fn_user_billing .billing__activation{ | |
margin-bottom: 39px; | |
} | |
.techwave_fn_user_billing .billing__activation .activation_status .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 5px; | |
} | |
.techwave_fn_user_billing .billing__activation .activation_status .desc{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_user_billing .billing__activation .activation_status{ | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
position: relative; | |
padding: 28px 30px 23px; | |
margin-bottom: 15px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
column-gap: 30px; | |
} | |
.techwave_fn_user_billing .billing__activation .status_right{ | |
width: 150px; | |
max-width: 50%; | |
text-align: right; | |
} | |
.techwave_fn_user_billing .billing__activation .status_right .info{ | |
display: block; | |
font-size: 11px; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
font-weight: 500; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
line-height: 1; | |
margin-bottom: 6px; | |
} | |
.techwave_fn_user_billing .billing__activation .status_right .progress{ | |
display: block; | |
width: 100%; | |
height: 4px; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 4px; | |
position: relative; | |
} | |
.techwave_fn_user_billing .billing__activation .status_right .progress.active:after{ | |
width: var(--frenify-progress); | |
} | |
.techwave_fn_user_billing .billing__activation .status_right .progress:after{ | |
right: 0; | |
top: 0; | |
position: absolute; | |
bottom: 0; | |
background-color: var(--techwave-main-color); | |
border-radius: 4px; | |
width: 0; | |
transition: all .3s ease; | |
content: ''; | |
} | |
.techwave_fn_user_billing .billing__activation .activation_actions{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_user_billing .billing__activation .activation_actions a{ | |
margin: 5px 10px 5px 0; | |
} | |
.techwave_fn_user_billing .payment__methods .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 22px; | |
line-height: 1.364; | |
font-weight: 600; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 22px; | |
} | |
.techwave_fn_user_billing .payment__methods .payment__list{ | |
margin: 0; | |
list-style-type: none; | |
padding: 0; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin-left: -20px; | |
} | |
.techwave_fn_user_billing .payment__methods .payment__list_item{ | |
margin: 0; | |
padding: 0; | |
width: 50%; | |
padding-left: 20px; | |
margin-bottom: 20px; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .item{ | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
position: relative; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .item_header{ | |
padding: 17px 15px 13px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 3px; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .subtitle{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .action{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
width: 100%; | |
justify-content: space-between; | |
height: 40px; | |
padding: 0 15px; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper{ | |
position: relative; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .options{ | |
width: 30px; | |
height: 30px; | |
border-radius: 30px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .dots{ | |
display: block; | |
position: relative; | |
width: 15px; | |
height: 3px; | |
border-left: 3px solid var(--techwave-heading-color); | |
border-right: 3px solid var(--techwave-heading-color); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .dots:after{ | |
width: 3px; | |
top: 0; | |
bottom: 0; | |
left: 3px; | |
content: ''; | |
position: absolute; | |
background-color: var(--techwave-heading-color); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper:hover .edit__popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0px); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup{ | |
position: absolute; | |
left: 100%; | |
bottom: 0; | |
width: 140px; | |
opacity: 0; | |
visibility: hidden; | |
transition: all .3s ease; | |
transform: translateY(-20px); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup a{ | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-decoration: none; | |
overflow: hidden; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup a:hover{ | |
color: var(--techwave-main-color); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup ul{ | |
list-style-type: none; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 5px; | |
margin: 0; | |
padding: 15px 20px; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup li{ | |
margin: 0; | |
margin-bottom: 3px; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_user_billing .payment__methods .ready .edit_wrapper .edit__popup li:last-child{ | |
margin-bottom: 0; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .primary{ | |
display: block; | |
height: 20px; | |
padding: 0 15px; | |
background-color: var(--techwave-main-color); | |
color: #fff; | |
font-family: var(--techwave-heading-font-family); | |
font-weight: 500; | |
font-size: 11px; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
line-height: 20px; | |
border-radius: 15px; | |
} | |
.techwave_fn_user_billing .payment__methods .ready .primary span{ | |
position: relative; | |
top: 1px; | |
} | |
.techwave_fn_user_billing .payment__methods .new .item{ | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
position: relative; | |
padding: 30px 15px 27px; | |
text-align: center; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.techwave_fn_user_billing .payment__methods .new .item a{ | |
z-index: 2; | |
} | |
.techwave_fn_user_billing .payment__methods .new .add{ | |
height: 40px; | |
width: 40px; | |
position: relative; | |
margin-bottom: 9px; | |
} | |
.techwave_fn_user_billing .payment__methods .new .add:after{ | |
width: 2px; | |
height: 40px; | |
position: absolute; | |
content: ''; | |
left: 50%; | |
margin-left: -1px; | |
background-color: var(--techwave-border-color); | |
top: 50%; | |
margin-top: -20px; | |
} | |
.techwave_fn_user_billing .payment__methods .new .add:before{ | |
width: 40px; | |
height: 2px; | |
position: absolute; | |
content: ''; | |
top: 50%; | |
left: 50%; | |
margin-left: -20px; | |
margin-top: -1px; | |
background-color: var(--techwave-border-color); | |
} | |
.techwave_fn_user_billing .payment__methods .new .text{ | |
font-weight: 500; | |
font-size: 14px; | |
line-height: 1; | |
text-transform: uppercase; | |
letter-spacing: .5px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 46) Page: AI Chat Bot | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_aichatbot_page{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
min-height: calc(100vh - var(--techwave-header-height) - 71px); | |
} | |
.techwave_fn_aichatbot_page .chat__page{ | |
width: 100%; | |
padding-top: 38px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
position: relative; | |
z-index: 3; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar, | |
.techwave_fn_doc_page .docsidebar, | |
.techwave_fn_aichatbot_page .chat__sidebar{ | |
width: 300px; | |
min-width: 300px; | |
border-left: 1px solid var(--techwave-border-color); | |
background-color: var(--techwave-header-bg-color); | |
top: var(--techwave-header-height); | |
position: fixed; | |
z-index: 1; | |
right: 0; | |
bottom: 0; | |
transform: translateX(105%); | |
transition: all .2s ease; | |
} | |
.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_image_generation_page .generation__sidebar, | |
.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_doc_page .docsidebar, | |
.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_aichatbot_page .chat__sidebar{ | |
transform: translateX(0); | |
} | |
.techwave_fn_aichatbot_page .chat__sidebar .sidebar_header{ | |
padding: 20px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_aichatbot_page .chat__sidebar .sidebar_content{ | |
padding: 20px; | |
} | |
.techwave_fn_aichatbot_page .chat__sidebar .sidebar_content ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.fn__chat_link{ | |
text-decoration: none; | |
display: block; | |
height: 40px; | |
line-height: 40px; | |
padding: 0 20px; | |
padding-right: 40px; | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
font-size: 16px; | |
font-weight: 400; | |
letter-spacing: 0; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-body-color); | |
position: relative; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
} | |
.fn__chat_link:hover{ | |
border-color:var(--techwave-body-color); | |
} | |
.fn__chat_link.active{ | |
border-color:var(--techwave-main-color); | |
color: var(--techwave-heading-color); | |
} | |
.fn__chat_link a:hover{ | |
border-color: var(--techwave-main-color); | |
} | |
.fn__chat_link .text{ | |
white-space: nowrap; | |
text-overflow: ellipsis; | |
overflow: hidden; | |
} | |
.fn__chat_link .options{ | |
position: absolute; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
display: block; | |
} | |
.fn__chat_link.opened .trigger span:after{ | |
background-color: var(--techwave-heading-color); | |
} | |
.fn__chat_link.opened .trigger span{ | |
border-left-color: var(--techwave-heading-color); | |
border-right-color: var(--techwave-heading-color); | |
} | |
.fn__chat_link.opened .trigger{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.fn__chat_link .trigger{ | |
background-color: transparent; | |
padding: 0; | |
margin: 0; | |
outline: none; | |
border: none; | |
width: 38px; | |
height: 38px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
cursor: pointer; | |
border-radius: 0 4px 4px 0; | |
} | |
.fn__chat_link .trigger:hover{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.fn__chat_link .trigger span{ | |
display: block; | |
position: relative; | |
width: 15px; | |
height: 3px; | |
border-left: 3px solid var(--techwave-body-color); | |
border-right: 3px solid var(--techwave-body-color); | |
} | |
.fn__chat_link .trigger span:after{ | |
width: 3px; | |
top: 0; | |
bottom: 0; | |
left: 3px; | |
content: ''; | |
position: absolute; | |
background-color: var(--techwave-body-color); | |
} | |
.fn__chat_link.opened{ | |
z-index: 10; | |
} | |
.fn__chat_link.opened .options__popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.fn__chat_link .options__popup{ | |
position: absolute; | |
top: 100%; | |
right: -1px; | |
width: 140px; | |
transition: all .3s ease; | |
padding-top: 6px; | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
} | |
.fn__chat_link .options__list{ | |
list-style-type: none; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 5px; | |
margin: 0; | |
padding: 15px 20px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
} | |
.fn__chat_link .options__list button:last-child{ | |
margin-bottom: 0; | |
} | |
.fn__chat_link .options__list button:hover{ | |
color: var(--techwave-main-color); | |
} | |
.fn__chat_link .options__list button{ | |
background-color: transparent; | |
outline: none; | |
border: none; | |
padding: 0; | |
margin: 0; | |
text-align: left; | |
cursor: pointer; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-decoration: none; | |
overflow: hidden; | |
margin-bottom: 3px; | |
transition: all .3s ease; | |
} | |
.fn__chat_link.live_edit .save_options, | |
.fn__chat_link.live_edit input{ | |
opacity: 1; | |
visibility: visible; | |
} | |
.fn__chat_link.live_edit .options, | |
.fn__chat_link.live_edit .text{ | |
opacity: 0; | |
visibility: hidden; | |
} | |
.fn__chat_link input{ | |
position: absolute; | |
height: 24px; | |
left: 12px; | |
right: 63px; | |
margin: 0; | |
padding: 0 7px; | |
top: 50%; | |
margin-top: -11px; | |
font-size: 16px; | |
font-weight: 400; | |
letter-spacing: 0; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-body-color); | |
background-color: transparent; | |
outline: none; | |
opacity: 0; | |
visibility: hidden; | |
min-width: inherit; | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
} | |
.fn__chat_link .save_options{ | |
position: absolute; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
opacity: 0; | |
visibility: hidden; | |
} | |
.fn__chat_link .save_options button{ | |
width: 24px; | |
height: 24px; | |
border: none; | |
cursor: pointer; | |
outline: none; | |
border-radius: 5px; | |
background-color: var(--techwave-some-a-bg-color); | |
margin-right: 5px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
color: var(--techwave-heading-color); | |
} | |
.fn__chat_link .save_options button:hover{ | |
background-color: var(--techwave-main-color); | |
color: #fff; | |
} | |
.fn__chat_link .save_options .fn__svg{ | |
width: 10px; | |
height: 10px; | |
} | |
.techwave_fn_aichatbot_page .chat__sidebar .group__title{ | |
margin: 0; | |
padding: 0 10px; | |
text-transform: uppercase; | |
font-weight: 500; | |
font-size: 11px; | |
letter-spacing: .5px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 12px; | |
} | |
.techwave_fn_aichatbot_page .chat__comment{ | |
margin-top: auto; | |
position: sticky; | |
bottom: 0; | |
padding: 20px 0; | |
background-color: var(--techwave-site-bg-color) | |
} | |
.fn__chat_comment{ | |
position: relative; | |
} | |
.fn__chat_comment .new__chat{ | |
position: absolute; | |
width: 500px; | |
max-width: 100%; | |
bottom: 100%; | |
margin-bottom: 53px; | |
left: 50%; | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
padding: 35px 40px 33px; | |
text-align: center; | |
transform: translateY(-20px) translateX(-50%) translateZ(0); | |
opacity: 0; | |
visibility: hidden; | |
pointer-events: none; | |
transition: all .3s ease; | |
} | |
.fn__chat_comment.neww .new__chat{ | |
transform: translateY(0px) translateX(-50%) translateZ(0); | |
opacity: 1; | |
visibility: visible; | |
} | |
.fn__chat_comment .new__chat:after{ | |
position: absolute; | |
left: 50%; | |
margin-left: -19px; | |
top: 100%; | |
margin-top: -1px; | |
width: 0; | |
height: 0; | |
border-style: solid; | |
border-width: 14px 19px 0 19px; | |
border-color: var(--techwave-some-r-bg-color) transparent transparent transparent; | |
content: ''; | |
filter: drop-shadow(0px 1px var(--techwave-border-color)); | |
} | |
.fn__chat_comment .new__chat *{ | |
margin: 0; | |
padding: 0; | |
font-size: 16px; | |
line-height: 1.5; | |
letter-spacing: .5px; | |
font-weight: 500; | |
text-transform: uppercase; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__hidden_textarea{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
max-height: inherit; | |
opacity: 0; | |
pointer-events: none; | |
overflow-y: scroll; | |
} | |
.fn__chat_comment textarea{ | |
border: 2px solid var(--techwave-border-color); | |
background-color: transparent; | |
border-radius: 5px; | |
outline: none; | |
display: block; | |
width: 100%; | |
padding: 18px 20px 16px; | |
padding-right: 72px; | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 22px; | |
max-height: 170px; | |
font-family: var(--techwave-heading-font-family); | |
resize: none; | |
overflow-y: hidden; | |
color: var(--techwave-heading-color); | |
} | |
#fn__chat_textarea::-webkit-scrollbar{ | |
width: 0; | |
} | |
.fn__chat_comment textarea:focus{ | |
border-color: var(--techwave-main-color); | |
} | |
.fn__chat_comment button{ | |
position: absolute; | |
width: 60px; | |
height: 44px; | |
bottom: 8px; | |
right: 8px; | |
padding: 0; | |
margin: 0; | |
border-radius: 5px; | |
outline: none; | |
cursor: pointer; | |
border: none; | |
background-color: var(--techwave-some-a-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
color: var(--techwave-heading-color); | |
transition: all .3s ease; | |
} | |
.fn__chat_comment button.disabled{ | |
cursor: not-allowed; | |
opacity: .5; | |
} | |
.fn__chat_comment button:hover{ | |
opacity: .8; | |
} | |
.fn__chat_comment .fn__svg{ | |
width: 21px; | |
height: 21px; | |
} | |
.fn__new_chat_link{ | |
text-decoration: none; | |
display: block; | |
width: 100%; | |
height: 40px; | |
line-height: 40px; | |
padding: 0 10px 0 44px; | |
position: relative; | |
font-weight: 500; | |
text-transform: uppercase; | |
font-size: 14px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 5px; | |
} | |
.fn__new_chat_link:hover{ | |
opacity: .8; | |
} | |
.fn__new_chat_link .text{ | |
overflow: hidden; | |
text-overflow: ellipsis; | |
white-space: nowrap; | |
position: relative; | |
top: 1px; | |
} | |
.fn__new_chat_link .icon{ | |
position: absolute; | |
width: 24px; | |
height: 24px; | |
display: block; | |
border-radius: 100%; | |
background-color: #454449; | |
left: 10px; | |
top: 50%; | |
margin-top: -12px; | |
} | |
.fn__new_chat_link .icon:before{ | |
content: ''; | |
position: absolute; | |
width: 2px; | |
height: 8px; | |
background-color: #b3aac7; | |
top: 50%; | |
left: 50%; | |
margin: -4px 0 0 -1px; | |
} | |
.fn__new_chat_link .icon:after{ | |
content: ''; | |
position: absolute; | |
width: 8px; | |
height: 2px; | |
background-color: #b3aac7; | |
top: 50%; | |
left: 50%; | |
margin: -1px 0 0 -4px; | |
} | |
.techwave_fn_aichatbot_page .fn__title_holder{ | |
margin-bottom: 23px; | |
} | |
.techwave_fn_aichatbot_page .chat__item{ | |
display: none; | |
} | |
.techwave_fn_aichatbot_page .chat__item.active{ | |
display: block; | |
} | |
.fn__chatbot .chat__box{ | |
position: relative; | |
margin-bottom: 20px; | |
} | |
.fn__chatbot .chat__box:last-child{ | |
margin-bottom: 0; | |
} | |
.fn__chatbot .author{ | |
position: absolute; | |
left: 30px; | |
top: -10px; | |
display: block; | |
height: 20px; | |
padding: 0 15px; | |
background-color: var(--techwave-main-color); | |
color: #fff; | |
font-family: var(--techwave-heading-font-family); | |
font-weight: 500; | |
font-size: 11px; | |
letter-spacing: .5px; | |
text-transform: uppercase; | |
line-height: 20px; | |
border-radius: 10px; | |
} | |
.fn__chatbot .author *{ | |
position: relative; | |
top: 1px; | |
} | |
.fn__chatbot .chat{ | |
padding: 30px; | |
border-radius: 5px; | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 1.375; | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__chatbot .chat a{ | |
text-decoration: underline; | |
color: var(--techwave-main-color); | |
} | |
.fn__chatbot .chat a:hover{ | |
text-decoration: none; | |
} | |
.fn__chatbot .your__chat .chat{ | |
background-color: var(--techwave-some-a-bg-color); | |
color: var(--techwave-heading-color); | |
} | |
.fn__chatbot .bot__chat .author{ | |
background-color: var(--techwave-some-a-bg-color); | |
color: var(--techwave-body-color); | |
} | |
.fn__chatbot .bot__chat .chat{ | |
background-color: var(--techwave-some-r-bg-color); | |
border: 1px solid var(--techwave-border-color); | |
} | |
.fn__chatbot .chat > *:last-child:not(ul){ | |
margin-bottom: 0; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 47) Page: Documentation | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_doc_page .doccontent{ | |
padding: 40px 0; | |
} | |
.techwave_fn_doc_page .doccontent *{ | |
margin-bottom: 20px; | |
} | |
.rounded{ | |
border-radius: 5px; | |
} | |
.techwave_fn_doc_page .docsidebar{ | |
padding: 20px; | |
} | |
.techwave_fn_doc_page .docsidebar .trigger{ | |
right: 5px; | |
top: 50%; | |
margin-top: -6px; | |
position: absolute; | |
display: block; | |
color: var(--techwave-heading-color); | |
transform: rotate(90deg); | |
transition: all .2s ease; | |
} | |
.techwave_fn_doc_page .docsidebar ul ul{ | |
margin: 0; | |
list-style-type: none; | |
padding: 0; | |
margin-left: 26px; | |
margin-top: 4px; | |
overflow: hidden; | |
} | |
.techwave_fn_doc_page .docsidebar .trigger .fn__svg{ | |
width: 12px; | |
height: 12px; | |
display: block; | |
} | |
.techwave_fn_doc_page .docsidebar li{ | |
position: relative; | |
margin-bottom: 4px; | |
} | |
.techwave_fn_doc_page .docsidebar ul{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
} | |
.techwave_fn_doc_page .docsidebar ul ul a{ | |
padding-left: 17px; | |
} | |
.techwave_fn_doc_page .docsidebar ul ul a:after{ | |
width: 5px; | |
height: 2px; | |
background-color: var(--techwave-heading-color); | |
position: absolute; | |
left: 6px; | |
top: 50%; | |
margin-top: -1px; | |
content: ''; | |
} | |
.techwave_fn_doc_page .docsidebar li:hover > a, | |
.techwave_fn_doc_page .docsidebar .current > a{ | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.techwave_fn_doc_page .docsidebar a{ | |
font-weight: 400; | |
border-radius: 5px; | |
font-family: var(--techwave-heading-font-family); | |
color: var(--techwave-heading-color); | |
text-decoration: none; | |
min-height: 36px; | |
padding: 5px 20px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
position: relative; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 48) Page: Image Generation | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_image_generation_page .generation__page{ | |
position: relative; | |
z-index: 2; | |
} | |
.techwave_fn_image_generation_page .generation_more{ | |
padding: 60px 40px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.techwave_fn_image_generation_page .generation_more .techwave_fn_button{ | |
padding: 0 57px; | |
} | |
.techwave_fn_image_generation_page .generation_header{ | |
padding: 40px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_image_generation_page .generation_header .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 22px; | |
font-weight: 600; | |
} | |
.techwave_fn_image_generation_page .generation_header .header_top{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
column-gap: 20px; | |
-ms-align-items: center; | |
align-items: center; | |
margin-bottom: 25px; | |
} | |
.techwave_fn_image_generation_page .generation_header .setup{ | |
-ms-align-items: center; | |
align-items: center; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
column-gap: 15px; | |
} | |
.techwave_fn_image_generation_page .generation_header .info{ | |
margin: 0; | |
padding: 0; | |
font-size: 12px; | |
font-weight: 400; | |
letter-spacing: 0; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_image_generation_page .sidebar__trigger{ | |
min-width: 50px; | |
width: 50px; | |
height: 50px; | |
text-decoration: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 100%; | |
color: var(--techwave-heading-color); | |
position: relative; | |
} | |
.techwave_fn_image_generation_page .sidebar__trigger .fn__svg{ | |
width: 24px; | |
height: 24px; | |
transition: all .3s ease; | |
} | |
.techwave_fn_image_generation_page .header_bottom textarea{ | |
border: 2px solid var(--techwave-border-color); | |
background-color: transparent; | |
border-radius: 5px; | |
outline: none; | |
display: block; | |
width: 100%; | |
padding: 18px 20px 16px; | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 22px; | |
max-height: 170px; | |
font-family: var(--techwave-heading-font-family); | |
resize: none; | |
overflow-y: hidden; | |
color: var(--techwave-heading-color); | |
} | |
.techwave_fn_image_generation_page .header_bottom textarea:focus{ | |
border-color: var(--techwave-main-color); | |
} | |
.techwave_fn_image_generation_page .include_area{ | |
margin-bottom: 10px; | |
position: relative; | |
} | |
.techwave_fn_image_generation_page .exclude_area{ | |
position: relative; | |
overflow: hidden; | |
} | |
.techwave_fn_image_generation_page .generate_section{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: flex-end; | |
} | |
.techwave_fn_image_generation_page .generate_section #generate_it{ | |
margin: 10px 0 10px 20px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .sidebar_details{ | |
padding: 20px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title .fn__tooltip{ | |
margin-left: 8px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .sidebar_details .title .fn__svg{ | |
display: block; | |
width: 14px; | |
height: 14px; | |
color: var(--techwave-body-color); | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .sidebar_model{ | |
padding: 30px 20px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
position: relative; | |
z-index: 5; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .contrast_switcher, | |
.techwave_fn_image_generation_page .generation__sidebar .prompt_magic_switcher{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .number_of_images{ | |
margin-bottom: 29px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .number_of_images .title{ | |
margin-bottom: 9px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .img_sizes{ | |
margin-bottom: 28px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .img_sizes .title{ | |
margin-bottom: 10px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .guidance_scale .title{ | |
margin-bottom: 4px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .guidance_scale{ | |
margin-bottom: 23px; | |
} | |
.techwave_fn_image_generation_page .generation__sidebar .prompt_magic_switcher{ | |
margin-bottom: 30px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 49) Icon Options (icon lightbox) | |
/*------------------------------------------------------------------*/ | |
.fn__icon_options{ | |
position: relative; | |
} | |
.fn__icon_options.align_right .fn__icon_popup{ | |
left: auto; | |
right: 0; | |
} | |
.fn__icon_options .fn__icon_popup{ | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
position: absolute; | |
left: 0; | |
top: 100%; | |
width: 240px; | |
margin: 0; | |
padding: 0; | |
padding-top: 5px; | |
transition: all .3s ease; | |
pointer-events: none; | |
} | |
.fn__icon_options.medium_size .fn__icon_button{ | |
width: 40px; | |
height: 40px; | |
} | |
.fn__icon_options.medium_size .fn__icon_button .fn__svg{ | |
width: 16px; | |
height: 16px; | |
} | |
.fn__icon_options:hover .fn__icon_popup{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
pointer-events: all; | |
} | |
.fn__icon_options .fn__icon_popup ul{ | |
list-style-type: none; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 5px; | |
margin: 0; | |
padding: 15px 20px; | |
} | |
.fn__icon_options .fn__icon_popup li:last-child{ | |
margin-bottom: 0; | |
} | |
.fn__icon_options .fn__icon_popup li{ | |
margin: 0; | |
margin-bottom: 3px; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__icon_options .fn__icon_popup a{ | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-decoration: none; | |
overflow: hidden; | |
} | |
.fn__icon_options .fn__icon_popup a:hover{ | |
color: var(--techwave-main-color); | |
opacity: .9; | |
} | |
.fn__icon_options .fn__icon_popup .high_priorety a{ | |
color: #f1416c; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 50) Generation Item (used in image generation page) | |
/*------------------------------------------------------------------*/ | |
.fn__generation_item{ | |
padding: 31px 40px 10px; | |
border-bottom: 1px solid var(--techwave-border-color); | |
position: relative; | |
} | |
.fn__generation_item:hover{ | |
z-index: 10; | |
} | |
.fn__generation_item .item_header{ | |
padding: 0 0 20px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
column-gap: 20px; | |
-ms-align-items: center; | |
align-items: center; | |
width: 100%; | |
position: relative; | |
z-index: 1; | |
} | |
.fn__generation_item .item_header .item_options{ | |
width: 100%; | |
width: auto; | |
-webkit-box-pack: end; | |
justify-content: flex-end; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
column-gap: 5px; | |
} | |
.fn__generation_item .item_header .title_holder{ | |
width: 100%; | |
} | |
.fn__generation_item .item_header .prompt_title{ | |
margin: 0; | |
padding: 0; | |
font-size: 16px; | |
line-height: 22px; | |
font-weight: 400; | |
letter-spacing: 0; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
align-self: flex-end; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: -webkit-box; | |
-webkit-box-orient: vertical; | |
-webkit-line-clamp: 1; | |
--chakra-line-clamp: 1; | |
} | |
.fn__generation_item .item_header .negative_prompt_title{ | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
line-height: 22px; | |
font-weight: 400; | |
letter-spacing: 0; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
align-self: flex-end; | |
overflow: hidden; | |
text-overflow: ellipsis; | |
display: -webkit-box; | |
-webkit-box-orient: vertical; | |
-webkit-line-clamp: 1; | |
--chakra-line-clamp: 1; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 51) Generation List (used in image generation page) | |
/*------------------------------------------------------------------*/ | |
.fn__generation_list{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin-left: -20px; | |
} | |
.fn__generation_list .fn__gl_item{ | |
margin: 0; | |
padding: 0; | |
padding-left: 20px; | |
width: 25%; | |
margin-bottom: 20px; | |
} | |
.fn__generation_list .fn__gl__item{ | |
width: 100%; | |
position: relative; | |
} | |
.fn__generation_list .fn__gl__item:before{ | |
content: ""; | |
height: 0px; | |
display: block; | |
padding-bottom: 100%; | |
} | |
.fn__generation_list .abs_item{ | |
position: absolute; | |
top: 0; | |
left: 0; | |
bottom: 0; | |
right: 0; | |
} | |
.fn__generation_list .abs_item img{ | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
border-radius: 5px; | |
} | |
.fn__generation_list .fn__gl__item:hover .all_options{ | |
transform: translateY(0); | |
opacity: 1; | |
visibility: visible; | |
pointer-events: all; | |
} | |
.fn__generation_list .all_options{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
position: absolute; | |
bottom: 5px; | |
left: 10px; | |
right: 10px; | |
flex-wrap: wrap; | |
transform: translateY(20px); | |
opacity: 0; | |
visibility: hidden; | |
pointer-events: none; | |
transition: all .3s ease; | |
} | |
.fn__generation_list .all_options .fn__icon_options{ | |
margin: 0 5px 5px 0; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 52) Input Toggle (custom) | |
/*------------------------------------------------------------------*/ | |
.fn__toggle{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
column-gap: 7px; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
font-size: 16px; | |
font-weight: 400; | |
letter-spacing: 0; | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__toggle .t_in { | |
position: relative; | |
width: 34px; | |
height: 20px; | |
} | |
.fn__toggle .t_content:before{ | |
right: 0; | |
bottom: 0; | |
top: 0; | |
left: 0; | |
position: absolute; | |
color: var(--techwave-main-color1); | |
content: ''; | |
opacity: .1; | |
border-radius: 20px; | |
box-shadow: 0px 5px 15px; | |
} | |
.fn__toggle .t_content:after{ | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
border-radius: 20px; | |
border: 2px solid transparent; | |
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
-webkit-mask-composite: destination-out; | |
-webkit-mask-composite: source-out; | |
mask-composite: exclude; | |
background-size: 300% 300%; | |
-webkit-animation: animatedgradient 4s ease alternate infinite; | |
animation: animatedgradient 4s ease alternate infinite; | |
} | |
.fn__toggle input { | |
opacity: 0; | |
width: 0; | |
height: 0; | |
} | |
.fn__toggle .t_slider { | |
position: absolute; | |
cursor: pointer; | |
width: 12px; | |
height: 12px; | |
background-color: var(--techwave-main-color); | |
left: 4px; | |
top: 50%; | |
margin-top: -6px; | |
border-radius: 100%; | |
-webkit-transition: .4s; | |
transition: .4s; | |
} | |
.fn__toggle .t_content:after{ | |
background: #454449; | |
} | |
.fn__toggle .t_slider{ | |
background-color: #454449; | |
} | |
.fn__toggle input:checked + .t_slider { | |
-webkit-transform: translateX(14px); | |
-ms-transform: translateX(14px); | |
transform: translateX(14px); | |
background-color: var(--techwave-main-color); | |
} | |
.fn__toggle input:checked ~ .t_content:after{ | |
background: -moz-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
background: -webkit-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
background: linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
} | |
.fn__toggle .t_in{ | |
border-radius: 34px; | |
} | |
.fn__toggle .t_in:before { | |
border-radius: 50%; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 53) Select Model (used in image generation page) | |
/*------------------------------------------------------------------*/ | |
.fn__select_model{ | |
position: relative; | |
} | |
.fn__select_model .all_models{ | |
position: absolute; | |
width: 100%; | |
left: 0; | |
top: 100%; | |
right: 0; | |
padding-top: 5px; | |
opacity: 0; | |
visibility: hidden; | |
transform: translateY(20px); | |
transition: all .3s ease; | |
pointer-events: none; | |
} | |
.fn__select_model.opened .all_models{ | |
opacity: 1; | |
visibility: visible; | |
pointer-events: all; | |
transform: translateY(0); | |
} | |
.fn__select_model .all_models ul{ | |
list-style-type: none; | |
background-color: var(--techwave-some-a-bg-color); | |
border-radius: 5px; | |
margin: 0; | |
padding: 15px 20px; | |
} | |
.fn__select_model .all_models li:last-child{ | |
margin-bottom: 0; | |
} | |
.fn__select_model .all_models li{ | |
margin: 0; | |
margin-bottom: 3px; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__select_model .all_models a.selected{ | |
color: var(--techwave-body-color); | |
} | |
.fn__select_model .all_models a{ | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
text-decoration: none; | |
overflow: hidden; | |
} | |
.fn__select_model .all_models a:hover{ | |
color: var(--techwave-main-color); | |
opacity: .9; | |
} | |
.fn__select_model .model_open{ | |
text-decoration: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
padding-right: 50px; | |
position: relative; | |
cursor: pointer; | |
-webkit-user-select: none; | |
-moz-user-select: none; | |
-ms-user-select: none; | |
-o-user-select: none; | |
user-select: none; | |
} | |
.fn__select_model .fn__icon_button{ | |
position: absolute; | |
top: 50%; | |
margin-top: -15px; | |
right: 0; | |
} | |
.fn__select_model .user_img{ | |
margin-right: 15px; | |
width: 40px; | |
height: 40px; | |
border-radius: 5px; | |
object-fit: cover; | |
} | |
.fn__select_model .subtitle{ | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
text-transform: uppercase; | |
letter-spacing: .5px; | |
font-size: 11px; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__select_model .title{ | |
margin: 0; | |
padding: 0; | |
font-weight: 400; | |
letter-spacing: 0px; | |
font-size: 16px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 54) Input quantity (custom) | |
/*------------------------------------------------------------------*/ | |
.fn__quantity{ | |
width: 120px; | |
height: 40px; | |
position: relative; | |
} | |
.fn__quantity a{ | |
display: block; | |
position: absolute; | |
width: 24px; | |
height: 24px; | |
text-decoration: none; | |
border-radius: 100%; | |
background-color: var(--techwave-border-color); | |
top: 50%; | |
margin-top: -12px; | |
} | |
.fn__quantity a:after{ | |
content: ''; | |
position: absolute; | |
background-color: var(--techwave-heading-color); | |
top: 50%; | |
left: 50%; | |
width: 8px; | |
height: 2px; | |
margin: -1px 0 0 -4px; | |
} | |
.fn__quantity a.increase:before{ | |
content: ''; | |
position: absolute; | |
background-color: var(--techwave-heading-color); | |
top: 50%; | |
left: 50%; | |
width: 2px; | |
height: 8px; | |
margin: -4px 0 0 -1px; | |
} | |
.fn__quantity .decrease{ | |
left: 8px; | |
} | |
.fn__quantity .increase{ | |
right: 8px; | |
} | |
.fn__quantity input{ | |
width: 100%; | |
max-width: 100%; | |
min-width: 100%; | |
border-radius: 20px; | |
height: 40px; | |
display: block; | |
text-align: center; | |
font-size: 16px; | |
font-weight: 400; | |
padding: 0 34px; | |
border: 2px solid var(--techwave-border-color); | |
color: var(--techwave-heading-color); | |
} | |
.fn__quantity input::-webkit-outer-spin-button, | |
.fn__quantity input::-webkit-inner-spin-button { | |
-webkit-appearance: none; | |
margin: 0; | |
} | |
.fn__quantity input[type=number] { | |
-moz-appearance: textfield; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 55) Input Range (custom) | |
/*------------------------------------------------------------------*/ | |
.fn__range{ | |
position: relative; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.fn__range .range_in{ | |
position: relative; | |
width: 100%; | |
} | |
.fn__range .slider{ | |
width: 0; | |
display: block; | |
position: absolute; | |
left: 0; | |
border-radius: 5px; | |
height: 4px; | |
top: 50%; | |
margin-top: -2px; | |
pointer-events: none; | |
} | |
.fn__range .slider:after{ | |
left: 0; | |
right: 0; | |
top: 0; | |
bottom: 0; | |
position: absolute; | |
content: ''; | |
border-radius: 5px 0 0 5px; | |
background-color: var(--techwave-main-color); | |
} | |
.fn__range .slider:before{ | |
width: 14px; | |
height: 14px; | |
background: var(--techwave-heading-color); | |
cursor: pointer; | |
border-radius: 100%; | |
position: absolute; | |
display: block; | |
right: 0; | |
top: 50%; | |
margin-top: -7px; | |
content: ''; | |
z-index: 2; | |
} | |
.fn__range .value{ | |
flex: auto; | |
width: 40px; | |
text-align: right; | |
padding-left: 10px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
font-size: 16px; | |
} | |
.fn__range input{ | |
-webkit-appearance: none; | |
display: block; | |
width: 100%; | |
margin: 0; | |
height: 4px; | |
border-radius: 5px; | |
outline: none; | |
border: none; | |
background-color: var(--techwave-some-a-bg-color); | |
} | |
.fn__range input::-webkit-slider-thumb { | |
-webkit-appearance: none; | |
appearance: none; | |
width: 14px; | |
height: 14px; | |
background: var(--techwave-heading-color); | |
cursor: pointer; | |
border-radius: 100%; | |
opacity: 0; | |
} | |
.fn__range input::-moz-range-thumb { | |
width: 14px; | |
height: 14px; | |
background: var(--techwave-heading-color); | |
cursor: pointer; | |
border-radius: 100%; | |
z-index: 3; | |
opacity: 0; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 56) Page: Privacy Policy | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_privacy_page .privacypage{ | |
padding: 40px 0; | |
} | |
.techwave_fn_privacy_page .privacypage hr{ | |
margin: 30px 0; | |
} | |
.techwave_fn_privacy_page .privacypage h4{ | |
font-weight: 500; | |
font-size: 22px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 57) Contact Form | |
/*------------------------------------------------------------------*/ | |
.fn_contact_form .input_list ul{ | |
margin: 0; | |
padding: 0; | |
margin-left: -10px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
list-style-type: none; | |
} | |
.fn_contact_form .input_list input[type="text"], | |
.fn_contact_form .input_list input[type="email"]{ | |
display: block; | |
width: 100%; | |
border-radius: 5px; | |
height: 60px; | |
} | |
.fn_contact_form .input_list input, | |
.fn_contact_form .input_list textarea{ | |
display: block; | |
} | |
.fn_contact_form .input_list li{ | |
margin: 0; | |
padding: 0; | |
width: 100%; | |
padding-left: 10px; | |
margin-bottom: 10px; | |
} | |
.fn_contact_form .input_list li:last-child{ | |
margin-top: 10px; | |
} | |
.fn_contact_form .empty_notice, | |
.fn_contact_form .returnmessage{ | |
padding: 20px; | |
width: 100%; | |
display: none; | |
color: var(--techwave-heading-color); | |
margin-top: 20px; | |
position: relative; | |
pointer-events: none; | |
} | |
.fn_contact_form .empty_notice:after, | |
.fn_contact_form .returnmessage:after{ | |
content: ""; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
border-radius: 20px; | |
border: 2px solid transparent; | |
background: -moz-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
background: -webkit-linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
background: linear-gradient(270deg,var(--techwave-main-color1),var(--techwave-main-color2),var(--techwave-main-color1),var(--techwave-main-color2)) border-box; | |
-webkit-mask: linear-gradient(#fff 0 0) padding-box, linear-gradient(#fff 0 0); | |
-webkit-mask-composite: destination-out; | |
-webkit-mask-composite: source-out; | |
mask-composite: exclude; | |
background-size: 300% 300%; | |
-webkit-animation: animatedgradient 4s ease alternate infinite; | |
animation: animatedgradient 4s ease alternate infinite; | |
} | |
.fn_contact_form .empty_notice:before, | |
.fn_contact_form .returnmessage:before{ | |
right: 0; | |
bottom: 0; | |
top: 0; | |
left: 0; | |
position: absolute; | |
color: var(--techwave-main-color1); | |
content: ''; | |
opacity: .1; | |
border-radius: 20px; | |
box-shadow: 0px 5px 15px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 58) Page: Contact | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_contact_page .contactpage{ | |
padding: 40px 0; | |
} | |
.techwave_fn_contact_page .contactpage{ | |
font-size: 18px; | |
line-height: 24px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 59) Page: Models | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_models_page{ | |
padding: 36px 0 40px 0; | |
} | |
.techwave_fn_models_page .fn__title_holder{ | |
margin-bottom: 28px; | |
} | |
.techwave_fn_models_page .models__filter{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: space-between; | |
-ms-align-items: center; | |
align-items: center; | |
column-gap: 50px; | |
margin-bottom: 30px; | |
position: relative; | |
z-index: 10; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_models_page .models__filter .filter__left{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.techwave_fn_models_page .models__filter .filter__right{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
column-gap: 5px; | |
margin: 5px 0; | |
} | |
.techwave_fn_models_page .filter__search{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
flex-wrap: wrap; | |
} | |
.techwave_fn_models_page .filter__search input{ | |
margin: 5px 10px 5px 0; | |
} | |
.techwave_fn_models_page .filter__search a{ | |
margin: 5px 0; | |
} | |
.techwave_fn_models_page .models__more{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
justify-content: center; | |
margin-top: 40px; | |
margin-bottom: 20px; | |
} | |
.techwave_fn_models .models__results{ | |
position: relative; | |
} | |
.techwave_fn_models .loading .tab__item{ | |
opacity: 0; | |
visibility: hidden; | |
} | |
.techwave_fn_models .loading .fn__preloader{ | |
opacity: 1; | |
visibility: visible; | |
} | |
.tab__item{ | |
display: none; | |
} | |
.tab__item.active{ | |
display: block; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 60) Model Items (used in model page) | |
/*------------------------------------------------------------------*/ | |
.fn__model_items{ | |
margin: 0; | |
padding: 0; | |
list-style-type: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin-left: -20px; | |
} | |
.fn__model_item{ | |
margin: 0; | |
padding: 0; | |
width: 20%; | |
padding-left: 20px; | |
margin-bottom: 20px; | |
} | |
.fn__model_item .item{ | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
position: relative; | |
background-color: var(--techwave-some-r-bg-color); | |
min-height: 100%; | |
} | |
.fn__model_item.new .item a{ | |
z-index: 3; | |
} | |
.fn__model_item.new .item{ | |
padding: 30px 15px 27px; | |
text-align: center; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.fn__model_item.new .item .add{ | |
height: 80px; | |
width: 80px; | |
position: relative; | |
margin-bottom: 29px; | |
} | |
.fn__model_item.new .item .add:after{ | |
width: 2px; | |
height: 80px; | |
position: absolute; | |
content: ''; | |
left: 50%; | |
margin-left: -1px; | |
background-color: var(--techwave-border-color); | |
top: 50%; | |
margin-top: -40px; | |
} | |
.fn__model_item.new .item:hover{ | |
border-color: var(--techwave-main-color); | |
} | |
.fn__model_item.new .item .add:before{ | |
width: 80px; | |
height: 2px; | |
position: absolute; | |
content: ''; | |
top: 50%; | |
left: 50%; | |
margin-left: -40px; | |
margin-top: -1px; | |
background-color: var(--techwave-border-color); | |
} | |
.fn__model_item.new .item .text{ | |
font-weight: 500; | |
font-size: 14px; | |
line-height: 1; | |
text-transform: uppercase; | |
letter-spacing: .5px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.fn__model_item .item:hover .fn__bookmark{ | |
opacity: 1; | |
visibility: visible; | |
pointer-events: all; | |
} | |
.fn__model_item .img:before{ | |
height: 0; | |
content: ''; | |
padding-bottom: 100%; | |
display: block; | |
} | |
.fn__model_item .img{ | |
position: relative; | |
margin: -1px; | |
margin-bottom: 0; | |
} | |
.fn__model_item .img img{ | |
position: absolute; | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
top: 0; | |
left: 0; | |
border-radius: 5px 5px 0 0; | |
} | |
.fn__model_item .item__info{ | |
padding: 18px 15px 14px; | |
} | |
.fn__model_item .item__info .title{ | |
margin: 0; | |
padding: 0; | |
font-size: 16px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
margin-bottom: 5px; | |
} | |
.fn__model_item .item__info .desc{ | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
font-weight: 400; | |
color: var(--techwave-body-color); | |
font-family: var(--techwave-body-font-family); | |
overflow: hidden; | |
display: -webkit-box; | |
-webkit-line-clamp: 3; /* number of lines to show */ | |
line-clamp: 3; | |
-webkit-box-orient: vertical; | |
} | |
.fn__model_item .item__author{ | |
height: 41px; | |
border-top: 1px solid var(--techwave-border-color); | |
padding: 10px 15px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.fn__model_item .item__author img{ | |
margin-right: 7px; | |
width: 20px; | |
height: 20px; | |
display: block; | |
border-radius: 100%; | |
object-fit: cover; | |
} | |
.fn__model_item .author_name{ | |
margin: 0; | |
padding: 0; | |
font-size: 14px; | |
font-weight: 400; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 61) Bookmark button | |
/*------------------------------------------------------------------*/ | |
.fn__bookmark{ | |
background-color: var(--techwave-some-r-bg-color); | |
width: 40px; | |
height: 40px; | |
border-radius: 100%; | |
text-decoration: none; | |
position: absolute; | |
top: 10px; | |
left: 10px; | |
z-index: 3; | |
color: var(--techwave-heading-color); | |
opacity: 0; | |
visibility: hidden; | |
pointer-events: none; | |
} | |
.fn__bookmark.has__bookmark .hasbook{ | |
opacity: 1; | |
} | |
.fn__bookmark.has__bookmark .hasntbook{ | |
opacity: 0; | |
} | |
.fn__bookmark .fn__svg{ | |
width: 16px; | |
height: 16px; | |
position: absolute; | |
top: 50%; | |
left: 50%; | |
margin: -8px 0 0 -8px; | |
} | |
.fn__bookmark .hasbook{ | |
opacity: 0; | |
color: var(--techwave-main-color); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 62) Font Trigger (used in AI chat bot page) | |
/*------------------------------------------------------------------*/ | |
.font__trigger{ | |
width: 11px; | |
height: 60px; | |
position: fixed; | |
right: 300px; | |
margin-right: 14px; | |
top: 50%; | |
margin-top: -30px; | |
z-index: 15; | |
cursor: pointer; | |
} | |
.font__trigger:after{ | |
content: ''; | |
position: absolute; | |
left: -10px; | |
right: -10px; | |
bottom: -10px; | |
top: -10px; | |
} | |
.font__trigger:hover span:after, | |
.font__trigger:hover span:before, | |
.font__trigger:hover span{ | |
background-color: var(--techwave-main-color); | |
} | |
.font__trigger span{ | |
width: 1px; | |
display: block; | |
top: 0; | |
bottom: 0; | |
left: 5px; | |
background-color: var(--techwave-border-color); | |
position: absolute; | |
transition: all .2s ease; | |
} | |
.font__trigger span:after, | |
.font__trigger span:before{ | |
width: 1px; | |
top: 50%; | |
margin-top: -20px; | |
height: 40px; | |
background-color: var(--techwave-border-color); | |
content: ''; | |
position: absolute; | |
transition: all .2s ease; | |
} | |
.font__trigger span:before{ | |
right: 100%; | |
margin-right: 5px; | |
} | |
.font__trigger span:after{ | |
left: 100%; | |
margin-left: 5px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 63) Font Trigger Lightbox | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_font.opened{ | |
pointer-events: all; | |
opacity: 1; | |
visibility: visible; | |
} | |
.techwave_fn_font{ | |
pointer-events: none; | |
opacity: 0; | |
visibility: hidden; | |
position: fixed; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
z-index: 110; | |
background-color: var(--techwave-site-bg-color); | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
overflow-y: auto; | |
padding: 40px; | |
} | |
.techwave_fn_font .font__closer_link{ | |
position: fixed; | |
right: 35px; | |
top: 35px; | |
z-index: 2; | |
} | |
.techwave_fn_font .font__closer{ | |
z-index: 1; | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
} | |
.techwave_fn_font .font__dialog{ | |
width: 500px; | |
max-width: 100%; | |
border-radius: 5px; | |
background-color: var(--techwave-some-r-bg-color); | |
padding: 35px 50px 40px; | |
position: relative; | |
border: 1px solid var(--techwave-border-color); | |
z-index: 3; | |
} | |
.techwave_fn_font .title{ | |
text-align: center; | |
margin: 0; | |
padding: 0; | |
font-weight: 500; | |
font-size: 24px; | |
letter-spacing: 0; | |
margin-bottom: 4px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_font select{ | |
margin-bottom: 30px; | |
} | |
.techwave_fn_font label{ | |
display: block; | |
font-size: 16px; | |
font-weight: 400; | |
line-height: 40px; | |
color: var(--techwave-heading-color); | |
font-family: var(--techwave-heading-font-family); | |
} | |
.techwave_fn_font .techwave_fn_button{ | |
width: 100%; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 64) Tooltipster custom theme named: tooltipster-techwave (it can be changed in init.js) | |
/*------------------------------------------------------------------*/ | |
.tooltipster-sidetip.tooltipster-techwave .tooltipster-box{ | |
border: 1px solid var(--techwave-border-color); | |
background: var(--techwave-some-r-bg-color); | |
} | |
.tooltipster-sidetip.tooltipster-techwave .tooltipster-content{ | |
color: var(--techwave-heading-color); | |
font-size: 14px; | |
} | |
.tooltipster-sidetip.tooltipster-techwave .tooltipster-arrow-uncropped{ | |
display: none; | |
} | |
.tooltipster-sidetip.tooltipster-techwave.tooltipster-bottom .tooltipster-arrow:after{ | |
content: ''; | |
position: absolute; | |
top: 5px; | |
left: 3px; | |
width: 14px; | |
height: 14px; | |
transform: rotate(45deg); | |
border: 1px solid var(--techwave-border-color); | |
background-color: var(--techwave-some-r-bg-color); | |
} | |
.tooltipster-sidetip.tooltipster-techwave.tooltipster-bottom .tooltipster-arrow{ | |
background-color: transparent; | |
top: -1px; | |
} | |
.tooltipster-sidetip.tooltipster-techwave.tooltipster-right .tooltipster-arrow{ | |
left: -1px; | |
background-color: transparent; | |
} | |
.tooltipster-sidetip.tooltipster-techwave.tooltipster-right .tooltipster-arrow:after{ | |
content: ''; | |
position: absolute; | |
top: 3px; | |
left: 5px; | |
width: 14px; | |
height: 14px; | |
transform: rotate(45deg); | |
border: 1px solid var(--techwave-border-color); | |
background-color: var(--techwave-some-r-bg-color); | |
} | |
.tooltipster-sidetip.tooltipster-techwave.tooltipster-left .tooltipster-arrow{ | |
right: -1px; | |
background-color: transparent; | |
} | |
.tooltipster-sidetip.tooltipster-techwave.tooltipster-left .tooltipster-arrow:after{ | |
content: ''; | |
position: absolute; | |
top: 3px; | |
right: 5px; | |
width: 14px; | |
height: 14px; | |
transform: rotate(45deg); | |
border: 1px solid var(--techwave-border-color); | |
background-color: var(--techwave-some-r-bg-color); | |
} | |
/*------------------------------------------------------------------*/ | |
/* 65) Page: Intro | |
/*------------------------------------------------------------------*/ | |
.techwave_fn_intro{ | |
padding: 150px 20px 100px; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
-ms-align-items: center; | |
align-items: center; | |
} | |
.techwave_fn_intro .first{ | |
text-align: center; | |
margin-bottom: 54px; | |
} | |
.techwave_fn_intro .txt{ | |
opacity: 0; | |
position: absolute; | |
pointer-events: none; | |
} | |
.techwave_fn_intro .mac{ | |
margin: 0 -20px; | |
margin-bottom: 86px; | |
} | |
.techwave_fn_intro .mac img{ | |
width: 100%; | |
height: 100%; | |
object-fit: cover; | |
} | |
.techwave_fn_intro .livechat{ | |
padding: 24px; | |
position: relative; | |
border: 2px dashed #252525; | |
border-radius: 30px; | |
width: 825px; | |
max-width: 100%; | |
margin: 0 auto; | |
margin-top: 41px; | |
margin-bottom: 133px; | |
} | |
.techwave_fn_intro .livechat .chat__comment{ | |
margin-top: 20px; | |
} | |
.techwave_fn_intro .livechat .chat_decor{ | |
position: absolute; | |
right: 47px; | |
z-index: 5; | |
top: 100%; | |
margin-top: -25px; | |
} | |
.techwave_fn_intro .or{ | |
padding-top: 87px; | |
padding-bottom: 55px; | |
text-align: center; | |
} | |
.techwave_fn_intro .or h1{ | |
font-size: 150px; | |
font-size: calc(50px + 5.211vw); | |
font-weight: 700; | |
text-transform: uppercase; | |
font-family: sans-serif; | |
} | |
.techwave_fn_intro .or h1 span{ | |
color: var(--techwave-site-bg-color); | |
-webkit-text-stroke: 1px var(--techwave-main-color); | |
text-stroke: 1px var(--techwave-main-color); | |
letter-spacing: -6px; | |
} | |
.fn__center_title{ | |
text-align: center; | |
max-width: 700px; | |
} | |
.fn__center_title h3.big{ | |
font-size: 60px; | |
margin-top: -6px; | |
margin-bottom: 18px; | |
} | |
.fn__center_title p{ | |
margin: 0; | |
} | |
.fn__center_title h3{ | |
font-size: 32px; | |
line-height: 1.2; | |
margin: 0; | |
font-weight: 300; | |
text-transform: uppercase; | |
letter-spacing: .5px; | |
text-shadow: 0px 0px 15px rgba(124,95,227,.35); | |
} | |
.fn__center_title .lines{ | |
position: relative; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
height: 18px; | |
margin-bottom: 34px; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
} | |
.fn__center_title .lines span{ | |
position: relative; | |
} | |
.fn__center_title .lines .r, | |
.fn__center_title .lines .l{ | |
width: 100px; | |
height: 2px; | |
display: block; | |
background-color: var(--techwave-main-color); | |
} | |
.fn__center_title .lines span:after{ | |
right: 0; | |
bottom: 0; | |
top: 0; | |
left: 0; | |
position: absolute; | |
color: var(--techwave-main-color1); | |
content: ''; | |
opacity: .35; | |
box-shadow: 0px 0px 10px; | |
} | |
.fn__center_title .lines .c:after{ | |
border-radius: 6px; | |
left: -2px; | |
right: -2px; | |
top: -2px; | |
bottom: -2px; | |
} | |
.fn__center_title .lines .c{ | |
width: 120px; | |
height: 18px; | |
display: block; | |
border: 2px solid var(--techwave-main-color); | |
margin: 0 10px; | |
border-radius: 6px; | |
} | |
.txt_unlim{ | |
width: 100%; | |
overflow: hidden; | |
} | |
.marquee{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.TickerNews{ | |
width: 100%; | |
overflow: hidden; | |
} | |
.TickerNews .js-marquee-wrapper{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: nowrap; | |
} | |
.TickerNews .ti_wrapper{ | |
width: 100%; | |
position: relative; | |
overflow: hidden; | |
} | |
.TickerNews .ti_slide{ | |
position: relative; | |
left: 0; | |
top: 0; | |
} | |
.TickerNews .marquee{ | |
overflow: hidden; | |
} | |
.TickerNews .ti_content{ | |
position: relative; | |
float:left; | |
} | |
.TickerNews .js-marquee{ | |
float: left; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: nowrap; | |
} | |
.TickerNews .item{ | |
float: left; | |
position: relative; | |
white-space: nowrap; | |
color: var(--techwave-site-bg-color); | |
-webkit-text-stroke: 1px var(--techwave-main-color); | |
text-stroke: 1px var(--techwave-main-color); | |
letter-spacing: -6px; | |
font-size: 150px; | |
font-size: calc(50px + 5.211vw); | |
font-weight: 900; | |
font-family: sans-serif; | |
text-transform: uppercase; | |
} | |
.techwave_fn_intro .templates{ | |
width: 1650px; | |
max-width: 100% | |
} | |
.techwave_fn_intro .templates ul{ | |
margin: 0; | |
list-style-type: none; | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
flex-wrap: wrap; | |
margin-left: -50px; | |
} | |
.techwave_fn_intro .templates li{ | |
margin: 0; | |
padding: 0; | |
padding-left: 50px; | |
margin-bottom: 50px; | |
width: 50%; | |
} | |
.techwave_fn_intro .templates .top{ | |
display: block; | |
width: 100%; | |
text-decoration: none; | |
border: 1px solid var(--techwave-border-color); | |
border-radius: 5px; | |
transition: all .4s ease; | |
position: relative; | |
} | |
.techwave_fn_intro .templates .top:after{ | |
content: ''; | |
position: absolute; | |
top: 100%; | |
left: 0; | |
right: 0; | |
height: 20px; | |
transform: translateY(-20px); | |
transition: all .4s ease; | |
} | |
.techwave_fn_intro .templates .top img{ | |
display: block; | |
border-radius: 4px; | |
} | |
.techwave_fn_intro .templates .top:hover:after{ | |
transform: translateY(0px); | |
} | |
.techwave_fn_intro .templates .top:hover{ | |
transform: translateY(-20px); | |
} | |
.techwave_fn_intro .templates div div{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-ms-align-items: center; | |
align-items: center; | |
justify-content: center; | |
padding-top: 30px; | |
} | |
.techwave_fn_intro .templates .techwave_fn_button{ | |
padding: 0 52px; | |
} | |
#img_gen{ | |
padding-top: 48px; | |
margin-bottom: 91px; | |
} | |
#demos{ | |
padding-top: 100px; | |
margin-bottom: 73px; | |
} | |
/*------------------------------------------------------------------*/ | |
/* 66) Media Queries (Responsive) | |
/*------------------------------------------------------------------*/ | |
@media(max-width: 1400px){ | |
.fn__model_item{width: 25%;} | |
} | |
@media(max-width: 1367px){ | |
.techwave_fn_interactive_list li{width: 100%;max-width: 100%;} | |
} | |
@media(max-width: 1200px){ | |
.fn__model_item{width: 33.3333%;} | |
} | |
@media(max-width: 1040px){ | |
.techwave_fn_pricing .pricing__content{display: none;} | |
.fn__mobile_pricing{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.font__trigger{ | |
right: 0px; | |
} | |
.techwave_fn_accordion .acc__title{ | |
font-size: 18px; | |
} | |
.techwave_fn_sign, | |
.techwave_fn_sign .form__content, | |
.techwave_fn_interactive_list.modern a, | |
.techwave_fn_changelog .item__header, | |
.techwave_fn_changelog .item__content, | |
.techwave_fn_accordion .acc__header, | |
.techwave_fn_accordion .acc__content{ | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
.techwave_fn_pricing .pricing__footer .item_col, | |
.techwave_fn_pricing .pricing__heading .item, | |
.techwave_fn_pricing .pricing__fields .item_col, | |
.techwave_fn_pricing .pricing__header .item_col{ | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
.techwave_fn_image_generation_page .generation_header, | |
.fn__generation_item{padding-left: 20px;padding-right: 20px;} | |
.techwave_fn_image_generation_page .sidebar__trigger{display: none;} | |
.techwave_fn_aichatbot_page, | |
.techwave_fn_doc_page, | |
.techwave_fn_image_generation_page{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
-webkit-flex-direction: column-reverse; | |
-moz-flex-direction: column-reverse; | |
-ms-flex-direction: column-reverse; | |
-o-flex-direction: column-reverse; | |
flex-direction: column-reverse; | |
min-height: inherit; | |
} | |
.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_content{ | |
margin-right: 0; | |
} | |
.techwave_fn_wrapper.fn__has_sidebar .techwave_fn_doc_page .docsidebar, | |
.techwave_fn_aichatbot_page .chat__sidebar, | |
.techwave_fn_image_generation_page .generation__sidebar{ | |
position: relative; | |
width: 100%; | |
height: auto; | |
left: auto; | |
right: auto; | |
top: auto; | |
min-width: 100%; | |
border-left: none; | |
border-bottom: 1px solid var(--techwave-border-color); | |
} | |
.techwave_fn_searchbar{ | |
left: 0; | |
padding: 0 20px; | |
} | |
.techwave_fn_searchbar .search__icon{ | |
left: 20px; | |
} | |
.techwave_fn_searchbar .search__closer{ | |
right: 20px; | |
} | |
.techwave_fn_searchbar .search__input{ | |
padding-left: 25px; | |
padding-right: 30px; | |
} | |
.techwave_fn_img_lightbox .lightbox__tlimg{ | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
.techwave_fn_img_lightbox .lightbox__related{ | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
.fn__grid_items li{width: 25%;} | |
.fn__gallery_item{ | |
width: 33.3333%; | |
} | |
.techwave_fn_header{ | |
padding: 0 20px 0 60px; | |
} | |
.techwave_fn_leftpanel .mobile_closer{ | |
display: -webkit-flex; | |
display: -moz-flex; | |
display: -ms-flex; | |
display: -o-flex; | |
display: flex; | |
} | |
.techwave_fn_leftpanel .desktop_closer{ | |
display: none; | |
} | |
.techwave_fn_leftpanel .mobile_extra_closer{ | |
position: absolute; | |
left: 100%; | |
width: calc(100vw - var(--techwave-left-panel-width)); | |
top: 0; | |
bottom: 0; | |
background-color: var(--techwave-some-r-bg-color); | |
opacity: 0; | |
pointer-events: none; | |
margin-left: 1px; | |
} | |
.section_home{ | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
} | |
.section_home .section_left{ | |
width: 100%; | |
border-right: none; | |
border-bottom: 1px solid var(--techwave-border-color); | |
padding: 73px 20px 60px; | |
} | |
.section_home .section_right{ | |
width: 100%; | |
padding: 70px 20px; | |
} | |
.techwave_fn_footer{ | |
padding-left: 20px; | |
padding-right: 20px; | |
} | |
.section_home .company_info{ | |
max-width: 100%; | |
} | |
.techwave_fn_content{ | |
margin-left: 0; | |
} | |
.techwave_fn_header{ | |
left: 0; | |
} | |
.techwave_fn_leftpanel{ | |
transform: translateX(-100%); | |
} | |
.techwave_fn_leftpanel .fn__icon_button{ | |
right: -51px; | |
width: 40px; | |
height: 40px; | |
transform: rotate(180deg); | |
margin-top: -20px; | |
} | |
.mobile-panel-opened .techwave_fn_leftpanel .fn__icon_button{ | |
transform: rotate(0); | |
} | |
.mobile-panel-opened .techwave_fn_leftpanel .mobile_extra_closer{ | |
opacity: 0.9; | |
pointer-events: all; | |
} | |
.mobile-panel-opened .techwave_fn_header, | |
.mobile-panel-opened .techwave_fn_content{ | |
transform: translateX(300px); | |
} | |
.mobile-panel-opened .techwave_fn_leftpanel{ | |
transform: translateX(0); | |
} | |
} | |
@media(max-width: 900px){ | |
.techwave_fn_pricing .item_row .item_col{ | |
width: 25% ; | |
max-width: 25% ; | |
} | |
.techwave_fn_pricing .pricing__header .price span{ | |
font-size: 20px; | |
} | |
.techwave_fn_pricing .pricing__footer .item_col, | |
.techwave_fn_pricing .pricing__heading .item, | |
.techwave_fn_pricing .pricing__fields .item_col, | |
.techwave_fn_pricing .pricing__header .item_col{ | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.techwave_fn_img_lightbox .lightbox__top{ | |
-webkit-flex-direction: column; | |
-moz-flex-direction: column; | |
-ms-flex-direction: column; | |
-o-flex-direction: column; | |
flex-direction: column; | |
} | |
.techwave_fn_img_lightbox .lightbox__tl{ | |
width: 100%; | |
} | |
.techwave_fn_img_lightbox .lightbox__tr{ | |
width: 100%; | |
border-left: none; | |
border-top: 1px solid var(--techwave-border-color); | |
} | |
} | |
@media(max-width: 768px){ | |
.fn__mobile_pricing .pricing__item{ | |
width: 100%; | |
} | |
.fn__generation_list .fn__gl_item{width: 50%;} | |
.fn__model_item{width: 50%;} | |
.fn__gallery_items .item__info{ | |
opacity: 1; | |
visibility: visible; | |
transform: translateY(0); | |
} | |
.techwave_fn_footer_content{ | |
flex-wrap: wrap; | |
} | |
.fn__grid_items li{ | |
width: 50%; | |
} | |
.fn__gallery_item{ | |
width: 50%; | |
} | |
.techwave_fn_header .header__left{ | |
display: none; | |
} | |
.techwave_fn_header{ | |
justify-content: flex-end; | |
} | |
} | |
@media(max-width: 480px){ | |
.techwave_fn_sign, | |
.techwave_fn_sign .form__content, | |
.techwave_fn_changelog .item__header, | |
.techwave_fn_changelog .item__content, | |
.techwave_fn_accordion .acc__header, | |
.techwave_fn_accordion .acc__content{ | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.fn__generation_list .fn__gl_item{width: 100%;} | |
.techwave_fn_image_generation_page .generation_header, | |
.fn__generation_item{ | |
padding-left: 10px; | |
padding-right: 10px; | |
} | |
.fn__model_item{width: 100%;} | |
.fn__grid_items ul{ | |
margin-left: -10px; | |
} | |
.fn__grid_items li{ | |
padding-left: 10px; | |
margin-bottom: 10px; | |
} | |
.fn__nav_bar .user_opener{ | |
width: 50px; | |
height: 50px; | |
} | |
.fn__details_list li{ | |
width: 100%; | |
} | |
.fn__gallery_item{ | |
width: 100%; | |
} | |
.techwave_fn_header{ | |
padding-right: 10px; | |
} | |
.fn__nav_bar .item_opener .dark_mode{ | |
margin: -9px 0 0 -9px; | |
} | |
.fn__nav_bar .bar__item{ | |
margin-right: 5px; | |
} | |
.fn__nav_bar .bar__item_user{ | |
margin-left: 5px; | |
} | |
.fn__nav_bar .item_opener{ | |
width: 40px; | |
height: 40px; | |
} | |
.fn__nav_bar .item_opener .fn__svg{ | |
width: 18px; | |
height: 18px; | |
} | |
} |