edgarhrh
2 months ago
commit
58eedc53e1
202 changed files with 34058 additions and 0 deletions
@ -0,0 +1,10 @@ |
|||||
|
{ |
||||
|
"presets": [ |
||||
|
[ |
||||
|
"@babel/preset-env", |
||||
|
{ |
||||
|
"targets": "> 0.25%, not dead" |
||||
|
} |
||||
|
] |
||||
|
] |
||||
|
} |
||||
@ -0,0 +1,2 @@ |
|||||
|
NODE_ENV="development" |
||||
|
VITE_BASE_API="/api" |
||||
@ -0,0 +1,2 @@ |
|||||
|
NODE_ENV="production" |
||||
|
VITE_BASE_API="http://localhost:5090/" |
||||
@ -0,0 +1,32 @@ |
|||||
|
# Logs |
||||
|
logs |
||||
|
*.log |
||||
|
npm-debug.log* |
||||
|
yarn-debug.log* |
||||
|
yarn-error.log* |
||||
|
pnpm-debug.log* |
||||
|
lerna-debug.log* |
||||
|
|
||||
|
node_modules |
||||
|
.DS_Store |
||||
|
dist |
||||
|
dist-ssr |
||||
|
coverage |
||||
|
*.local |
||||
|
|
||||
|
/cypress/videos/ |
||||
|
/cypress/screenshots/ |
||||
|
|
||||
|
# Editor directories and files |
||||
|
.vscode/* |
||||
|
!.vscode/extensions.json |
||||
|
.idea |
||||
|
*.suo |
||||
|
*.ntvs* |
||||
|
*.njsproj |
||||
|
*.sln |
||||
|
*.sw? |
||||
|
|
||||
|
*.tsbuildinfo |
||||
|
|
||||
|
.vercel |
||||
@ -0,0 +1,13 @@ |
|||||
|
<!DOCTYPE html> |
||||
|
<html lang="en" dir="ltr"> |
||||
|
<head> |
||||
|
<meta charset="UTF-8" /> |
||||
|
<link rel="icon" href="/favicon.ico" /> |
||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> |
||||
|
<title>博工科技</title> |
||||
|
</head> |
||||
|
<body theme="custom-dark"> |
||||
|
<div id="app"></div> |
||||
|
<script type="module" src="/src/main.ts"></script> |
||||
|
</body> |
||||
|
</html> |
||||
File diff suppressed because it is too large
@ -0,0 +1,44 @@ |
|||||
|
{ |
||||
|
"name": "-", |
||||
|
"version": "0.0.0", |
||||
|
"private": true, |
||||
|
"type": "module", |
||||
|
"scripts": { |
||||
|
"dev": "vite --mode dev --host", |
||||
|
"build": "vite build", |
||||
|
"prod": "vite --mode prod", |
||||
|
"build:dev": "vue-tsc --noEmit && vite build --mode dev", |
||||
|
"build:prod": "vue-tsc --noEmit && vite build --mode prod", |
||||
|
"preview": "vite preview", |
||||
|
"build-only": "vite build", |
||||
|
"type-check": "vue-tsc --build --force" |
||||
|
}, |
||||
|
"dependencies": { |
||||
|
"@phosphor-icons/vue": "^2.1.6", |
||||
|
"@vueuse/core": "^10.8.0", |
||||
|
"axios": "^1.7.2", |
||||
|
"bootstrap": "^5.3.3", |
||||
|
"swiper": "^11.0.6", |
||||
|
"vant": "^4.9.4", |
||||
|
"vue": "^3.4.15", |
||||
|
"vue-countup-v3": "^1.4.1", |
||||
|
"vue-router": "^4.2.5" |
||||
|
}, |
||||
|
"devDependencies": { |
||||
|
"@babel/core": "^7.24.9", |
||||
|
"@babel/preset-env": "^7.25.0", |
||||
|
"@rollup/plugin-babel": "^6.0.4", |
||||
|
"@tsconfig/node20": "^20.1.2", |
||||
|
"@types/bootstrap": "^5.2.10", |
||||
|
"@vitejs/plugin-vue": "^5.0.3", |
||||
|
"@vitejs/plugin-vue-jsx": "^4.0.0", |
||||
|
"@vue/tsconfig": "^0.5.1", |
||||
|
"amfe-flexible": "^2.2.1", |
||||
|
"npm-run-all2": "^6.1.1", |
||||
|
"postcss-pxtorem": "^6.0.0", |
||||
|
"sass": "^1.71.1", |
||||
|
"typescript": "~5.3.0", |
||||
|
"vite": "^5.0.11", |
||||
|
"vue-tsc": "^1.8.27" |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 110 KiB |
@ -0,0 +1,18 @@ |
|||||
|
<script setup lang="ts"> |
||||
|
import { onMounted } from 'vue'; |
||||
|
|
||||
|
import DefaultLayout from './layouts/DefaultLayout.vue'; |
||||
|
|
||||
|
onMounted(() => { |
||||
|
const body = document.querySelector('body'); |
||||
|
body.setAttribute('theme', 'custom-dark'); |
||||
|
}); |
||||
|
</script> |
||||
|
|
||||
|
<template> |
||||
|
<keep-alive> |
||||
|
<component :is="$route.meta.layout || DefaultLayout"> |
||||
|
<router-view /> |
||||
|
</component> |
||||
|
</keep-alive> |
||||
|
</template> |
||||
@ -0,0 +1,46 @@ |
|||||
|
export const navbarData = [ |
||||
|
{ |
||||
|
id: "menu1", |
||||
|
menuTitle: "Home", |
||||
|
path: "#", |
||||
|
menuItems: [ |
||||
|
{ |
||||
|
id: "homeONe", |
||||
|
title: "Home One", |
||||
|
menuItemPath: "/", |
||||
|
}, |
||||
|
{ |
||||
|
id: "homeTwo", |
||||
|
title: "Home Two", |
||||
|
menuItemPath: "/landing-page-two", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
id: "about-page", |
||||
|
menuTitle: "About", |
||||
|
path: "/about-us", |
||||
|
}, |
||||
|
{ |
||||
|
id: "menu2", |
||||
|
menuTitle: "Blog", |
||||
|
path: "#", |
||||
|
menuItems: [ |
||||
|
{ |
||||
|
id: "all-blogs", |
||||
|
title: "Blogs", |
||||
|
menuItemPath: "/blogs", |
||||
|
}, |
||||
|
{ |
||||
|
id: "Blogs-details", |
||||
|
title: "Blog Details", |
||||
|
menuItemPath: "/blog-details", |
||||
|
}, |
||||
|
], |
||||
|
}, |
||||
|
{ |
||||
|
id: "contact-page", |
||||
|
menuTitle: "Contact", |
||||
|
path: "/contact", |
||||
|
}, |
||||
|
]; |
||||
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 319 B |
|
After Width: | Height: | Size: 524 B |
|
After Width: | Height: | Size: 31 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 27 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 181 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 14 KiB |
|
After Width: | Height: | Size: 35 KiB |
|
After Width: | Height: | Size: 51 KiB |
|
After Width: | Height: | Size: 714 KiB |
|
After Width: | Height: | Size: 276 KiB |
|
After Width: | Height: | Size: 345 KiB |
|
After Width: | Height: | Size: 509 KiB |
|
After Width: | Height: | Size: 390 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 30 KiB |
|
After Width: | Height: | Size: 3.4 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 578 B |
|
After Width: | Height: | Size: 616 B |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 751 B |
|
After Width: | Height: | Size: 462 B |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 2.8 KiB |
|
After Width: | Height: | Size: 124 KiB |
|
After Width: | Height: | Size: 122 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 729 B |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 633 B |
|
After Width: | Height: | Size: 2.7 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 629 KiB |
|
After Width: | Height: | Size: 63 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 79 KiB |
|
After Width: | Height: | Size: 463 KiB |
|
After Width: | Height: | Size: 939 B |
|
After Width: | Height: | Size: 659 B |
|
After Width: | Height: | Size: 579 B |
|
After Width: | Height: | Size: 1.1 MiB |
|
After Width: | Height: | Size: 11 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 173 KiB |
|
After Width: | Height: | Size: 377 KiB |
|
After Width: | Height: | Size: 12 KiB |
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 15 KiB |
|
After Width: | Height: | Size: 1.4 MiB |
|
After Width: | Height: | Size: 22 KiB |
|
After Width: | Height: | Size: 215 KiB |
|
After Width: | Height: | Size: 715 KiB |
|
After Width: | Height: | Size: 71 KiB |
|
After Width: | Height: | Size: 93 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 19 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 532 B |
@ -0,0 +1,284 @@ |
|||||
|
// reset code start |
||||
|
* { |
||||
|
-webkit-tap-highlight-color: transparent; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
-webkit-appearance: none; |
||||
|
-moz-appearance: none; |
||||
|
appearance: none; |
||||
|
text-decoration: none; |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
background: none; |
||||
|
} |
||||
|
|
||||
|
ol, |
||||
|
ul, |
||||
|
dl { |
||||
|
margin-top: 0; |
||||
|
margin-bottom: 0rem; |
||||
|
} |
||||
|
|
||||
|
input:focus { |
||||
|
outline: 1px solid var(--black-neutral2) !important; |
||||
|
} |
||||
|
|
||||
|
input[type="number"]::-webkit-inner-spin-button, |
||||
|
input[type="number"]::-webkit-outer-spin-button { |
||||
|
-webkit-appearance: none; |
||||
|
margin: 0; |
||||
|
} |
||||
|
|
||||
|
input[type="date"] { |
||||
|
text-transform: uppercase; |
||||
|
} |
||||
|
|
||||
|
input[type="date"]::-webkit-inner-spin-button, |
||||
|
input[type="date"]::-webkit-calendar-picker-indicator { |
||||
|
display: none; |
||||
|
-webkit-appearance: none; |
||||
|
} |
||||
|
|
||||
|
input, |
||||
|
textarea { |
||||
|
padding: 12px 20px; |
||||
|
color: rgba(var(--black-neutral2), 1); |
||||
|
width: 100%; |
||||
|
outline-color: transparent; |
||||
|
font-size: 14px; |
||||
|
border-radius: 6px; |
||||
|
background-color: transparent; |
||||
|
} |
||||
|
input::-moz-placeholder, |
||||
|
textarea::-moz-placeholder { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
input::placeholder, |
||||
|
textarea::placeholder { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
input:focus, |
||||
|
textarea:focus { |
||||
|
outline: 1px solid #2fa75f; |
||||
|
box-shadow: none; |
||||
|
border: 1px solid transparent; |
||||
|
} |
||||
|
span { |
||||
|
display: inline-block; |
||||
|
} |
||||
|
// reset code end |
||||
|
|
||||
|
[theme="custom-light"] .light-mood-image-shape { |
||||
|
filter: brightness(0) !important; |
||||
|
} |
||||
|
|
||||
|
// light theme common class |
||||
|
[theme="custom-light"] .bg-light-white { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .light-theme-white-text { |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
/* scroll bar style */ |
||||
|
::-webkit-scrollbar-track { |
||||
|
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); |
||||
|
background-color: var(--black-neutral1); |
||||
|
} |
||||
|
::-webkit-scrollbar { |
||||
|
width: 6px; |
||||
|
background-color: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
.cart-scrollbar::-webkit-scrollbar { |
||||
|
height: 3px; |
||||
|
} |
||||
|
|
||||
|
::-webkit-scrollbar-thumb { |
||||
|
background-color: var(--secondary-color); |
||||
|
border-radius: 10px; |
||||
|
width: 2px; |
||||
|
} |
||||
|
|
||||
|
/* swiper slider */ |
||||
|
.swiper-wrapper { |
||||
|
-webkit-transition-timing-function: linear !important; |
||||
|
-o-transition-timing-function: linear !important; |
||||
|
transition-timing-function: linear !important; |
||||
|
} |
||||
|
|
||||
|
.m-t-120px { |
||||
|
margin-top: 120px; |
||||
|
@media (max-width: 1400px) { |
||||
|
margin-top: 100px; |
||||
|
} |
||||
|
@media (max-width: 1200px) { |
||||
|
margin-top: 80px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
margin-top: 60px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-t-60px { |
||||
|
margin-top: 60px; |
||||
|
@media (max-width: 1400px) { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
@media (max-width: 1200px) { |
||||
|
margin-top: 36px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
} |
||||
|
.m-t-40px { |
||||
|
margin-top: 40px; |
||||
|
@media (max-width: 1400px) { |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
@media (max-width: 1200px) { |
||||
|
margin-top: 28px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-t-32px { |
||||
|
margin-top: 32px; |
||||
|
@media (max-width: 1400px) { |
||||
|
margin-top: 26px; |
||||
|
} |
||||
|
@media (max-width: 1200px) { |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
margin-top: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.m-b-60px { |
||||
|
margin-bottom: 60px; |
||||
|
} |
||||
|
.m-t-32px { |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
|
||||
|
.p-32px { |
||||
|
padding: 32px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
padding: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.overflow-x-hidden { |
||||
|
overflow-x: hidden; |
||||
|
} |
||||
|
|
||||
|
.gap-6px { |
||||
|
gap: 6px; |
||||
|
} |
||||
|
|
||||
|
// animation |
||||
|
@keyframes scaleUp { |
||||
|
50% { |
||||
|
transform: scale(1.25); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.scale-up-down { |
||||
|
animation: scaleUp 2s linear infinite; |
||||
|
} |
||||
|
|
||||
|
//marque left |
||||
|
@keyframes marqueeLeft { |
||||
|
0% { |
||||
|
left: 0; |
||||
|
} |
||||
|
100% { |
||||
|
left: -100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.to-left { |
||||
|
animation: marqueeLeft 25s linear infinite; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
// marque right |
||||
|
@keyframes marqueeRight { |
||||
|
0% { |
||||
|
right: 0; |
||||
|
} |
||||
|
100% { |
||||
|
right: -100%; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
@-webkit-keyframes rotating { |
||||
|
from { |
||||
|
-webkit-transform: rotate(0deg); |
||||
|
-o-transform: rotate(0deg); |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
to { |
||||
|
-webkit-transform: rotate(360deg); |
||||
|
-o-transform: rotate(360deg); |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
@keyframes rotating { |
||||
|
from { |
||||
|
-ms-transform: rotate(0deg); |
||||
|
-moz-transform: rotate(0deg); |
||||
|
-webkit-transform: rotate(0deg); |
||||
|
-o-transform: rotate(0deg); |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
to { |
||||
|
-ms-transform: rotate(360deg); |
||||
|
-moz-transform: rotate(360deg); |
||||
|
-webkit-transform: rotate(360deg); |
||||
|
-o-transform: rotate(360deg); |
||||
|
transform: rotate(360deg); |
||||
|
} |
||||
|
} |
||||
|
.rotating { |
||||
|
-webkit-animation: rotating 2s linear infinite; |
||||
|
-moz-animation: rotating 2s linear infinite; |
||||
|
-ms-animation: rotating 2s linear infinite; |
||||
|
-o-animation: rotating 2s linear infinite; |
||||
|
animation: rotating 2s linear infinite; |
||||
|
} |
||||
|
|
||||
|
.to-right { |
||||
|
animation: marqueeRight 25s linear infinite; |
||||
|
} |
||||
|
|
||||
|
// back to home button style |
||||
|
.button-back-to-home { |
||||
|
padding: 12px 20px; |
||||
|
background: var(--secondary-color); |
||||
|
border-radius: 8px; |
||||
|
color: var(--white-neutral1); |
||||
|
display: flex; |
||||
|
grid-area: 8px; |
||||
|
align-items: center; |
||||
|
width: fit-content; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
transition: all 0.3s ease; |
||||
|
|
||||
|
&:hover { |
||||
|
scale: 1.02; |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,483 @@ |
|||||
|
.navbar-container { |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
|
||||
|
.desktop-navbar-container { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
border-radius: 16px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
background: linear-gradient(153deg, rgba(255, 255, 255, 0.12) -65.62%, rgba(255, 255, 255, 0.04) 83.28%); |
||||
|
|
||||
|
backdrop-filter: blur(25px); |
||||
|
padding: 16px 24px; |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .desktop-navbar-container { |
||||
|
background: #fff; |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
.logo-main { |
||||
|
font-size: 32px; |
||||
|
font-style: normal; |
||||
|
font-weight: 600; |
||||
|
line-height: 120%; |
||||
|
|
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
} |
||||
|
span { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .logo-main { |
||||
|
&:hover { |
||||
|
color: #1d1d1d; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.desktop-menu-items { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 40px; |
||||
|
list-style: none; |
||||
|
color: var(--white-neutral1) !important; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .menu-item-text-white { |
||||
|
color: #222426 !important; |
||||
|
-webkit-text-fill-color: #222426 !important; |
||||
|
} |
||||
|
|
||||
|
#primary { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 100%; |
||||
|
padding-left: 0px !important; |
||||
|
li { |
||||
|
.desktop-menu-item { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
white-space: nowrap; |
||||
|
text-decoration: none; |
||||
|
display: block; |
||||
|
position: relative; |
||||
|
z-index: 1; |
||||
|
-webkit-background-clip: text; |
||||
|
-webkit-text-fill-color: transparent; |
||||
|
background-image: linear-gradient(to right, var(--secondary-color), var(--secondary-color) 50%, #fff 50%); |
||||
|
background-size: 200% 100%; |
||||
|
background-position: -100%; |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:before { |
||||
|
display: block; |
||||
|
content: ''; |
||||
|
width: 0; |
||||
|
height: 3px; |
||||
|
bottom: 5px; |
||||
|
left: 0; |
||||
|
bottom: -3px; |
||||
|
z-index: 0; |
||||
|
position: absolute; |
||||
|
background: var(--secondary-color); |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
} |
||||
|
&:hover { |
||||
|
background-position: 0%; |
||||
|
&:before { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.menu-active { |
||||
|
background-position: 0% !important; |
||||
|
&:before { |
||||
|
width: 100% !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.navbar-hover-text { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.main-menu-dropdown { |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
background: var(--black-neutral2); |
||||
|
z-index: 3; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
border-radius: 0 12px 0; |
||||
|
max-height: 0; |
||||
|
overflow: hidden; |
||||
|
opacity: 0; |
||||
|
transition: all 0.4s ease-in-out; |
||||
|
padding-bottom: 5px; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .main-menu-dropdown { |
||||
|
background: #ffefd7; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .main-menu-dropdown { |
||||
|
border-color: #a8a5a5e0; |
||||
|
background: #ecececec; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
.menu-item-with-dropdown { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
.menu-arrow-icon { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
stroke-width: 3; |
||||
|
} |
||||
|
|
||||
|
&:hover .menu-arrow-icon { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
transform: rotate(180deg); |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
&:hover .main-menu-dropdown { |
||||
|
max-height: 400px; |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.desktop-menu-dropdown-item { |
||||
|
box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 3px, rgba(0, 0, 0, 0.24) 0px 1px 2px; |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
padding: 15px; |
||||
|
|
||||
|
&:hover { |
||||
|
border-color: transparent; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// mobile navbar |
||||
|
.mobile-navbar-container { |
||||
|
border-radius: 16px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
background: linear-gradient(153deg, rgba(255, 255, 255, 0.12) -65.62%, rgba(255, 255, 255, 0.04) 83.28%); |
||||
|
color: var(--white-neutral1); |
||||
|
backdrop-filter: blur(25px); |
||||
|
padding: 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
@media (min-width: 1200px) { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// menu icon start |
||||
|
@mixin line-props { |
||||
|
width: 100%; |
||||
|
height: 2px; |
||||
|
background-color: #fff; |
||||
|
border-radius: 4px; |
||||
|
position: absolute; |
||||
|
transition: transform 0.4s ease, opacity 0.4s ease; |
||||
|
} |
||||
|
|
||||
|
.hamburger { |
||||
|
padding: 10px 0px; |
||||
|
cursor: pointer; |
||||
|
display: inline-block; |
||||
|
overflow: hidden; |
||||
|
background-color: transparent; |
||||
|
|
||||
|
&__container { |
||||
|
width: 36px; |
||||
|
height: 24px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.hamburger__inner { |
||||
|
transform: translate(-51px, 50%); |
||||
|
opacity: 0; |
||||
|
&::before, |
||||
|
&::after { |
||||
|
transform: translate(102px, 0); |
||||
|
opacity: 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
.hamburger__inner { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__inner { |
||||
|
@include line-props; |
||||
|
top: 50%; |
||||
|
transform: translate(5px, -50%); |
||||
|
opacity: 1; |
||||
|
&::before, |
||||
|
&::after { |
||||
|
@include line-props; |
||||
|
content: ''; |
||||
|
opacity: 1; |
||||
|
transform: translate(-5px, 0); |
||||
|
} |
||||
|
|
||||
|
&::before { |
||||
|
top: -13px; |
||||
|
} |
||||
|
|
||||
|
&::after { |
||||
|
top: 13px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover { |
||||
|
.hamburger__hidden { |
||||
|
opacity: 1; |
||||
|
transform: translate(0, -50%); |
||||
|
&::before, |
||||
|
&::after { |
||||
|
opacity: 1; |
||||
|
transform: translate(0, 0); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&.is-active { |
||||
|
.hamburger__hidden { |
||||
|
opacity: 1; |
||||
|
transform: rotate(45deg); |
||||
|
&::before { |
||||
|
transform: translate(0, 13px) rotate(90deg); |
||||
|
transform-origin: center; |
||||
|
} |
||||
|
|
||||
|
&::after { |
||||
|
transform: translate(0, -13px) rotate(0); |
||||
|
transform-origin: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__hidden { |
||||
|
@include line-props; |
||||
|
background-color: var(--secondary-color); |
||||
|
top: 50%; |
||||
|
transform: translate(51px, -50%); |
||||
|
&::before, |
||||
|
&::after { |
||||
|
@include line-props; |
||||
|
background-color: var(--secondary-color); |
||||
|
content: ''; |
||||
|
transform: translate(102px, 0); |
||||
|
} |
||||
|
|
||||
|
&::before { |
||||
|
top: -13px; |
||||
|
} |
||||
|
|
||||
|
&::after { |
||||
|
top: 13px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .hamburger__inner { |
||||
|
background: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .hamburger__inner::before, |
||||
|
[theme='custom-light'] .hamburger__inner::after { |
||||
|
background: var(--secondary-color); |
||||
|
} |
||||
|
// menu icon end |
||||
|
|
||||
|
// mobile sidebar menu |
||||
|
.mobile-sidebar-containe { |
||||
|
background: var(--black-neutral4); |
||||
|
width: 250px; |
||||
|
position: fixed; |
||||
|
height: 100vh; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
transition: all 0.7s; |
||||
|
overflow-y: scroll; |
||||
|
z-index: 4; |
||||
|
border-radius: 0px 32px 32px 0px; |
||||
|
|
||||
|
&::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
transform: translateX(-300px); |
||||
|
|
||||
|
.sidebar-logo { |
||||
|
padding: 40px 85px 70px 57px; |
||||
|
&:hover { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mobile-sidebar-menus { |
||||
|
list-style: none; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 32px; |
||||
|
padding: 0; |
||||
|
|
||||
|
.mobile-menu-item { |
||||
|
border-bottom: 1px solid #2b2b2b; |
||||
|
padding-bottom: 20px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.mobile-single-menu { |
||||
|
padding-left: 32px; |
||||
|
padding-right: 32px; |
||||
|
|
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mobile-menu-link { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
align-items: center; |
||||
|
font-size: 16px !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .mobile-menu-item { |
||||
|
border-bottom: 1px solid rgba(54, 60, 66, 0.2) !important; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .mobile-sidebar-containe { |
||||
|
background: #fff; |
||||
|
|
||||
|
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
.mobile-sidebar-show { |
||||
|
z-index: 3; |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
|
||||
|
.mobile-sidebar-hide { |
||||
|
z-index: 3; |
||||
|
transform: translateX(-300px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.logo-main-mobile { |
||||
|
font-size: 32px; |
||||
|
font-style: normal; |
||||
|
font-weight: 600; |
||||
|
line-height: 120%; |
||||
|
padding: 32px; |
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
} |
||||
|
span { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .logo-main-mobile { |
||||
|
&:hover { |
||||
|
color: #1d1d1d; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.mobile-sidebar-overlay { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
z-index: 3; |
||||
|
background: black; |
||||
|
opacity: 0.5; |
||||
|
transition: all 0.8s ease-in-out; |
||||
|
|
||||
|
// @media (min-width: 1200px) { |
||||
|
// display: none; |
||||
|
// } |
||||
|
} |
||||
|
|
||||
|
.mobile-sidebar-overlay-show { |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
|
||||
|
.mobile-sidebar-overlay-hide { |
||||
|
transform: translateX(-100%); |
||||
|
} |
||||
|
|
||||
|
.icon-normal { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.icon-rotate { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
.text-secondary { |
||||
|
color: var(--secondary-color) !important; |
||||
|
} |
||||
|
|
||||
|
.mobile-sidebar-menu-modal { |
||||
|
top: 0px; |
||||
|
padding: 24px 0; |
||||
|
margin: 0 32px; |
||||
|
background: var(--black-neutral3); |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
border-radius: 0px 20px 0px; |
||||
|
.sub-item { |
||||
|
border-bottom: 1px solid var(--black-neutral2); |
||||
|
padding-bottom: 20px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .mobile-sidebar-menu-modal { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #ecececec; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .sub-item { |
||||
|
border-color: #a8a5a5e0; |
||||
|
background: #ecececec; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
@ -0,0 +1,51 @@ |
|||||
|
.theme-modal-button { |
||||
|
position: fixed; |
||||
|
right: 0px; |
||||
|
top: 50%; |
||||
|
background-color: #24202f; |
||||
|
border-radius: 10px 0 0 10px; |
||||
|
z-index: 4; |
||||
|
|
||||
|
button { |
||||
|
background: transparent; |
||||
|
padding: 5px; |
||||
|
} |
||||
|
.setting-icon { |
||||
|
background-color: transparent !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.theme-modal { |
||||
|
position: fixed; |
||||
|
right: -350px; |
||||
|
top: 57%; |
||||
|
background-color: #24202f; |
||||
|
border-radius: 10px 0 0 10px; |
||||
|
width: 100px; |
||||
|
padding: 12px 0; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
transition: all 0.7s ease-in-out; |
||||
|
z-index: 4; |
||||
|
|
||||
|
&__theme-dir { |
||||
|
padding: 8px 12px; |
||||
|
font-size: 20px; |
||||
|
color: #fff; |
||||
|
border-bottom: 2px solid var(--secondary-color); |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
height: fit-content; |
||||
|
|
||||
|
&:hover { |
||||
|
background: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
&:last-child { |
||||
|
border-bottom: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.modal-open { |
||||
|
right: 0; |
||||
|
} |
||||
@ -0,0 +1,165 @@ |
|||||
|
body { |
||||
|
background-color: var(--black-neutral1) !important; |
||||
|
margin: 0; |
||||
|
margin: 0; |
||||
|
color: var(--white-neutral1) !important; |
||||
|
font-family: var(--body-font) !important; |
||||
|
} |
||||
|
|
||||
|
button { |
||||
|
border: none; |
||||
|
} |
||||
|
|
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
} |
||||
|
|
||||
|
h1, |
||||
|
h2, |
||||
|
h3, |
||||
|
h4, |
||||
|
h5, |
||||
|
h6, |
||||
|
p, |
||||
|
button, |
||||
|
input { |
||||
|
margin: 0; |
||||
|
padding: 0; |
||||
|
border: 0; |
||||
|
} |
||||
|
|
||||
|
.display-4 { |
||||
|
font-size: 56px; |
||||
|
font-weight: 600; |
||||
|
line-height: 120%; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 40px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
font-size: 32px; |
||||
|
} |
||||
|
@media (max-width: 768px) { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.heading-1 { |
||||
|
font-size: 48px; |
||||
|
font-weight: 700; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 38px; |
||||
|
} |
||||
|
@media (max-width: 1200px) { |
||||
|
font-size: 32px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
@media (max-width: 768px) { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.heading-2 { |
||||
|
font-size: 40px; |
||||
|
font-weight: 600; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 32px; |
||||
|
} |
||||
|
@media (max-width: 1200px) { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
font-size: 26px; |
||||
|
} |
||||
|
@media (max-width: 768px) { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.heading-3 { |
||||
|
font-size: 32px; |
||||
|
font-weight: 600; |
||||
|
line-height: 120%; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 28px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
font-size: 24px; |
||||
|
} |
||||
|
@media (max-width: 768px) { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.heading-4 { |
||||
|
font-size: 24px; |
||||
|
font-weight: 500; |
||||
|
line-height: 130%; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.heading-5 { |
||||
|
font-size: 20px; |
||||
|
font-weight: 600; |
||||
|
line-height: 130%; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.textLead { |
||||
|
font-size: 24px; |
||||
|
line-height: 150%; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 20px; |
||||
|
} |
||||
|
} |
||||
|
.textXL { |
||||
|
font-size: 20px; |
||||
|
line-height: 150%; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 18px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.textL { |
||||
|
font-size: 18px; |
||||
|
line-height: 150%; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.textM { |
||||
|
font-size: 16px; |
||||
|
line-height: 150%; |
||||
|
@media (max-width: 1400px) { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.textS { |
||||
|
font-size: 14px; |
||||
|
line-height: 150%; |
||||
|
} |
||||
|
|
||||
|
.font-bold { |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
.font-semi-bold { |
||||
|
font-weight: 600; |
||||
|
} |
||||
|
.font-medium { |
||||
|
font-weight: 500; |
||||
|
} |
||||
|
|
||||
|
.font-thin { |
||||
|
font-weight: 300; |
||||
|
} |
||||
@ -0,0 +1,44 @@ |
|||||
|
// color variables |
||||
|
|
||||
|
:root { |
||||
|
--body-font: 'Kanit', sans-serif; |
||||
|
--primary-color: #ff6900; |
||||
|
--secondary-color: rgba(2, 232, 217, 1); |
||||
|
--accent1: #fff; |
||||
|
--accent2: #e6e6e6; |
||||
|
--accent3: #ffce32; |
||||
|
--accent4: #ffefd7; |
||||
|
--accent5: #cdff00; |
||||
|
--white: #ffffff; |
||||
|
|
||||
|
--white-neutral1: #0a090d; |
||||
|
--white-neutral2: #2b2b2b; |
||||
|
--white-neutral3: #222426; |
||||
|
--white-neutral4: #1a1a1a; |
||||
|
|
||||
|
--black-neutral1: #ffffff; |
||||
|
--black-neutral2: #f2f6f6; |
||||
|
--black-neutral3: #b3b6b9; |
||||
|
--black-neutral4: #f8f8f8; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-dark'] { |
||||
|
--primary-color: #ff6900; |
||||
|
--secondary-color: rgba(2, 232, 217, 1); |
||||
|
--accent1: #1d1d1d; |
||||
|
--accent2: #323232; |
||||
|
--accent3: #ffce32; |
||||
|
--accent4: #ffefd7; |
||||
|
--accent5: #cdff00; |
||||
|
--white: #ffffff; |
||||
|
|
||||
|
--black-neutral1: #0a090d; |
||||
|
--black-neutral2: #2b2b2b; |
||||
|
--black-neutral3: #222426; |
||||
|
--black-neutral4: #1a1a1a; |
||||
|
|
||||
|
--white-neutral1: #ffffff; |
||||
|
--white-neutral2: #f2f6f6; |
||||
|
--white-neutral3: #b3b6b9; |
||||
|
--white-neutral4: #f8f8f8; |
||||
|
} |
||||
File diff suppressed because it is too large
@ -0,0 +1,83 @@ |
|||||
|
.all-blog-top-content { |
||||
|
transition: all 0.9s; |
||||
|
background: var(--accent1); |
||||
|
margin-left: 274px; |
||||
|
margin-top: 124px; |
||||
|
margin-bottom: 24px; |
||||
|
margin-right: 24px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
margin-left: 0; |
||||
|
margin-right: 0px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
padding: 24px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 400px) { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.all-blog-bottom-content { |
||||
|
transition: all 0.9s; |
||||
|
background: var(--accent1); |
||||
|
margin-left: 274px; |
||||
|
margin-top: 60px; |
||||
|
margin-bottom: 24px; |
||||
|
margin-right: 24px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
padding: 60px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
margin-left: 0; |
||||
|
margin-right: 0px; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
padding: 24px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 400px) { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.box-bg1 { |
||||
|
border-radius: 20px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
background: rgba(34, 36, 38, 0.4); |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .all-blog-top-content { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #fff !important; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04) !important; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .all-blog-bottom-content { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #fff !important; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04) !important; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .box-bg1 { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #fff !important; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04) !important; |
||||
|
} |
||||
|
|
||||
|
.all-blog-table-cover-image { |
||||
|
border-radius: 8px; |
||||
|
} |
||||
@ -0,0 +1,16 @@ |
|||||
|
.service-table-icon { |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
} |
||||
|
|
||||
|
.catitem-box input { |
||||
|
background: var(--black-neutral3) !important; |
||||
|
padding: 10px 14px; |
||||
|
border: unset; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .catitem-box input { |
||||
|
background: #fff !important; |
||||
|
border: 1px solid #aeabab6b; |
||||
|
} |
||||
@ -0,0 +1,12 @@ |
|||||
|
.description-text { |
||||
|
text-overflow: ellipsis; |
||||
|
overflow: hidden; |
||||
|
max-width: 400px; |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
.table-responsive { |
||||
|
&::-webkit-scrollbar { |
||||
|
height: 3px; |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,135 @@ |
|||||
|
.bt-dashicon { |
||||
|
border-top: 1px solid var(--black-neutral2); |
||||
|
} |
||||
|
|
||||
|
.img-cheng { |
||||
|
background: var(--black-neutral3); |
||||
|
padding: 10px 14px; |
||||
|
border: unset; |
||||
|
outline: none; |
||||
|
color: var(--n3); |
||||
|
font-size: 14px; |
||||
|
border-radius: 8px; |
||||
|
padding: 40px 12px; |
||||
|
position: relative; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .img-cheng { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.5); |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
.img-cheng .custom-file { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.f-change-inthis { |
||||
|
position: relative; |
||||
|
height: 48px; |
||||
|
background: var(--black-neutral3); |
||||
|
padding: 10px 14px; |
||||
|
color: var(--n3); |
||||
|
font-size: 14px; |
||||
|
border-radius: 8px; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .f-change-inthis { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.5); |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
.f-change-inthis input { |
||||
|
position: absolute; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
border: unset !important; |
||||
|
outline: none !important; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
|
||||
|
.new-blog-dropdown-container { |
||||
|
width: 100% !important; |
||||
|
border-radius: 6px; |
||||
|
background: var(--black-neutral3); |
||||
|
|
||||
|
.dropdown-btn { |
||||
|
border-radius: 12px; |
||||
|
width: 100% !important; |
||||
|
justify-content: space-between; |
||||
|
padding: 9px 14px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .new-blog-dropdown-container { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.5); |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
/* editor custom style start*/ |
||||
|
|
||||
|
.quill-editor { |
||||
|
background: var(--black-neutral3); |
||||
|
border-radius: 12px; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .quill-editor { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.5); |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
.quill-editor .ql-container { |
||||
|
border-bottom-left-radius: 0.5em; |
||||
|
border-bottom-right-radius: 0.5em; |
||||
|
border: unset !important; |
||||
|
} |
||||
|
|
||||
|
/* Snow Theme */ |
||||
|
.quill-editor .ql-snow.ql-toolbar { |
||||
|
display: block; |
||||
|
background: inherit; |
||||
|
border: unset !important; |
||||
|
border-top-left-radius: 0.5em; |
||||
|
border-top-right-radius: 0.5em; |
||||
|
} |
||||
|
|
||||
|
/* Bubble Theme */ |
||||
|
.quill-editor .ql-bubble .ql-editor { |
||||
|
border: 1px solid #ccc; |
||||
|
border-radius: 0.5em; |
||||
|
} |
||||
|
|
||||
|
.quill-editor .ql-editor { |
||||
|
min-height: 18em; |
||||
|
} |
||||
|
|
||||
|
.ql-editor.ql-blank::before { |
||||
|
font-style: normal !important; |
||||
|
font-size: 14px !important; |
||||
|
color: #fff !important; |
||||
|
font-weight: 500 !important; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-stroke { |
||||
|
stroke: var(--white-neutral3) !important; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-fill, |
||||
|
.ql-snow .ql-stroke.ql-fill { |
||||
|
fill: var(--white-neutral3) !important; |
||||
|
} |
||||
|
|
||||
|
.ql-snow .ql-picker.ql-font .ql-picker-label::before, |
||||
|
.ql-snow .ql-picker.ql-font .ql-picker-item::before, |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-label::before, |
||||
|
.ql-snow .ql-picker.ql-size .ql-picker-item::before { |
||||
|
color: var(--white-neutral3) !important; |
||||
|
} |
||||
|
|
||||
|
/* editor custom style start end*/ |
||||
@ -0,0 +1,474 @@ |
|||||
|
.persona-info-container { |
||||
|
.personal-info-content { |
||||
|
margin-top: 44px; |
||||
|
border-radius: 20px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
background: rgba(34, 36, 38, 0.4); |
||||
|
|
||||
|
.personal-info-blue { |
||||
|
padding: 40px 32px 32px 32px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.personal-info-main-container { |
||||
|
border-top: 1px solid #2b2b2b; |
||||
|
border-bottom: 1px solid #2b2b2b; |
||||
|
padding: 32px 32px 40px 32px; |
||||
|
|
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(12, 1fr); |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.personal-info-left { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 7; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
.remove-image { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
|
||||
|
.remove-text { |
||||
|
cursor: pointer; |
||||
|
color: var(--white-neutral3); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.image-area { |
||||
|
border-radius: 12px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
background: var(--black-neutral3); |
||||
|
padding-top: 80px; |
||||
|
padding-bottom: 80px; |
||||
|
margin-top: 24px; |
||||
|
} |
||||
|
|
||||
|
.personal-profile-image { |
||||
|
border-radius: 100%; |
||||
|
display: block; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.personal-profile-shape { |
||||
|
position: absolute; |
||||
|
left: 50%; |
||||
|
top: 50%; |
||||
|
transform: translate(-50%, -50%); |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
width: 210px; |
||||
|
height: 210px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.personal-info-right { |
||||
|
grid-column-start: 7; |
||||
|
grid-column-end: 13; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .personal-info-content { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] |
||||
|
.persona-info-container |
||||
|
.personal-info-content |
||||
|
.personal-info-main-container { |
||||
|
border-color: rgba(179, 182, 185, 0.5); |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] |
||||
|
.persona-info-container |
||||
|
.personal-info-content |
||||
|
.personal-info-left |
||||
|
.image-area { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.4); |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
.personal-info-left-main { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 32px; |
||||
|
} |
||||
|
|
||||
|
.profile-image-upload { |
||||
|
border-radius: 12px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
background: var(--black-neutral3); |
||||
|
color: var(--white-neutral1); |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .profile-image-upload { |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
.choose-file { |
||||
|
border-radius: 12px 0px 0px 12px; |
||||
|
padding: 12px 24px; |
||||
|
border-right: 1px solid var(--black-neutral2); |
||||
|
background: #1d1d1d; |
||||
|
color: var(--white-neutral3); |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .choose-file { |
||||
|
color: #fff; |
||||
|
background: #4c4b4b; |
||||
|
} |
||||
|
|
||||
|
.no-file-chosen { |
||||
|
padding-left: 16px; |
||||
|
color: var(--white-neutral3); |
||||
|
} |
||||
|
|
||||
|
.image-requirements { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 12px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
} |
||||
|
.image-requirements-text { |
||||
|
font-size: 14px; |
||||
|
font-weight: 300; |
||||
|
line-height: 150%; |
||||
|
color: var(--white-neutral3); |
||||
|
} |
||||
|
|
||||
|
.light-text { |
||||
|
font-size: 14px; |
||||
|
font-weight: 300; |
||||
|
color: var(--white-neutral3); |
||||
|
margin-top: 12px; |
||||
|
} |
||||
|
|
||||
|
.personal-info-title { |
||||
|
p { |
||||
|
color: var(--white-neutral3); |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
input, |
||||
|
textarea { |
||||
|
width: 100%; |
||||
|
border-radius: 12px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
background: var(--black-neutral3); |
||||
|
padding: 12px 16px; |
||||
|
margin-top: 14px; |
||||
|
|
||||
|
&::placeholder { |
||||
|
color: var(--white-neutral1); |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
&:focus { |
||||
|
outline: none !important; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .personal-info-title input, |
||||
|
[theme="custom-light"] .personal-info-title textarea { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.5); |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
// personal rights section |
||||
|
|
||||
|
.enable-disable-area { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
|
||||
|
.text-enable-disable { |
||||
|
color: var(--white-neutral3); |
||||
|
align-self: flex-end; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.switch-checkbox { |
||||
|
height: 0; |
||||
|
width: 0; |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
|
||||
|
.switch-label { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
cursor: pointer; |
||||
|
width: 40px; |
||||
|
height: 24px; |
||||
|
background: grey; |
||||
|
border-radius: 100px; |
||||
|
position: relative; |
||||
|
transition: background-color 0.2s; |
||||
|
} |
||||
|
|
||||
|
.switch-label .switch-button { |
||||
|
content: ""; |
||||
|
position: absolute; |
||||
|
top: 4px; |
||||
|
left: 4px; |
||||
|
width: 16px; |
||||
|
height: 16px; |
||||
|
border-radius: 100%; |
||||
|
transition: 0.2s; |
||||
|
background: #fff; |
||||
|
box-shadow: 0 0 2px 0 rgba(10, 10, 10, 0.29); |
||||
|
} |
||||
|
|
||||
|
.switch-checkbox:checked + .switch-label .switch-button { |
||||
|
left: calc(100% - 2px); |
||||
|
transform: translateX(-100%); |
||||
|
} |
||||
|
|
||||
|
.switch-label:active .switch-button { |
||||
|
width: 20px; |
||||
|
} |
||||
|
|
||||
|
.personal-info-resume-button { |
||||
|
margin-top: 45px; |
||||
|
} |
||||
|
|
||||
|
.resume-text { |
||||
|
color: var(--white-neutral3); |
||||
|
} |
||||
|
|
||||
|
.resume-button { |
||||
|
margin-top: 12px; |
||||
|
border-radius: 12px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
background: var(--black-neutral3); |
||||
|
padding: 12px 4px 12px 24px; |
||||
|
color: var(--white-neutral3); |
||||
|
width: 100%; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .resume-button { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #efecec; |
||||
|
// box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
.resume-file { |
||||
|
margin-top: 54px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.resume-input { |
||||
|
margin-top: 14px; |
||||
|
} |
||||
|
|
||||
|
.resume-required { |
||||
|
margin-top: 12px; |
||||
|
padding-bottom: 52px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
padding-bottom: 32px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.information-section { |
||||
|
border-top: 1px solid #2b2b2b; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .information-section { |
||||
|
border-color: rgba(179, 182, 185, 0.5); |
||||
|
} |
||||
|
|
||||
|
.information-section-title { |
||||
|
color: var(--white-neutral2); |
||||
|
margin-top: 61px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-and-text { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
margin-top: 24px; |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1860px) { |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-input { |
||||
|
width: 100%; |
||||
|
input { |
||||
|
background: inherit; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.info-and-text-add { |
||||
|
background: var(--secondary-color); |
||||
|
border-radius: 12px; |
||||
|
padding: 12px 24px; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .info-and-text-add { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.add-info-table { |
||||
|
margin-top: 60px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
margin-top: 32px; |
||||
|
overflow-x: scroll; |
||||
|
&::-webkit-scrollbar { |
||||
|
height: 3px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
table { |
||||
|
width: 100%; |
||||
|
border-spacing: 0; |
||||
|
margin-top: 20px; |
||||
|
background-color: inherit; |
||||
|
} |
||||
|
|
||||
|
td { |
||||
|
border-top: 1px solid #2b2b2b; |
||||
|
border-bottom: 1px solid #2b2b2b; |
||||
|
padding: 24px; |
||||
|
text-align: left; |
||||
|
} |
||||
|
|
||||
|
.textXL { |
||||
|
white-space: nowrap; |
||||
|
} |
||||
|
|
||||
|
th { |
||||
|
border-top: 1px solid #2b2b2b; |
||||
|
padding: 28px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .add-info-table td { |
||||
|
border-color: rgba(179, 182, 185, 0.4); |
||||
|
} |
||||
|
|
||||
|
.table-edit-remove { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 8px; |
||||
|
justify-content: end; |
||||
|
} |
||||
|
|
||||
|
.edit-button { |
||||
|
padding: 8px; |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
background: var(--black-neutral3); |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
|
||||
|
&:hover { |
||||
|
border: 1px solid var(--accent3); |
||||
|
background: var(--accent3); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .edit-button { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #f6f1f1; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
|
||||
|
&:hover { |
||||
|
border: 1px solid var(--accent3); |
||||
|
background: var(--accent3); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.remove-button { |
||||
|
border-radius: 4px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
background: var(--black-neutral3); |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
|
||||
|
&:hover { |
||||
|
border: 1px solid var(--primary-color); |
||||
|
background: var(--primary-color); |
||||
|
} |
||||
|
|
||||
|
svg { |
||||
|
transform: rotate(45deg); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .remove-button { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #f6f1f1; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
|
||||
|
&:hover { |
||||
|
border: 1px solid var(--primary-color); |
||||
|
background: var(--primary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.update-button-container { |
||||
|
display: flex; |
||||
|
justify-content: end; |
||||
|
} |
||||
|
|
||||
|
.personal-info-update-button { |
||||
|
border-radius: 12px; |
||||
|
background: var(--secondary-color); |
||||
|
padding: 12px 24px; |
||||
|
margin-top: 32px; |
||||
|
margin-bottom: 40px; |
||||
|
margin-right: 32px; |
||||
|
|
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
scale: 1.03; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .personal-info-update-button { |
||||
|
margin-left: 32px; |
||||
|
color: #fff; |
||||
|
} |
||||
@ -0,0 +1,316 @@ |
|||||
|
// top bar start |
||||
|
.top-bar-container { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
transition: all 0.9s; |
||||
|
background: var(--accent1); |
||||
|
width: calc(100% - 250px); |
||||
|
left: 250px; |
||||
|
z-index: 2; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
width: 100%; |
||||
|
left: 0; |
||||
|
} |
||||
|
.top-bar-inner { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
padding: 20px 24px; |
||||
|
|
||||
|
.menu-icon { |
||||
|
padding: 18px; |
||||
|
color: var(--white-neutral3); |
||||
|
|
||||
|
@media (min-width: 1400px) { |
||||
|
visibility: hidden; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.user-icon { |
||||
|
padding: 18px; |
||||
|
color: var(--white-neutral3); |
||||
|
background: var(--black-neutral2); |
||||
|
border-radius: 100%; |
||||
|
cursor: pointer; |
||||
|
|
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
background: var(--secondary-color); |
||||
|
|
||||
|
svg { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .top-bar-container { |
||||
|
background: #fff; |
||||
|
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; |
||||
|
} |
||||
|
|
||||
|
.top-dropdown-container { |
||||
|
position: absolute; |
||||
|
width: 150px; |
||||
|
top: 100px; |
||||
|
right: 20px; |
||||
|
z-index: 200000; |
||||
|
background: var(--black-neutral3); |
||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
||||
|
max-height: 0; |
||||
|
overflow: hidden; |
||||
|
transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
||||
|
border-radius: 12px; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .top-dropdown-container { |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.top-dropdown-container.active { |
||||
|
max-height: 200px; |
||||
|
} |
||||
|
|
||||
|
.top-dropdown-option { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 12px; |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
// top bar end |
||||
|
|
||||
|
// inner container |
||||
|
.inner-content { |
||||
|
transition: all 0.9s; |
||||
|
background: var(--accent1); |
||||
|
margin-left: 274px; |
||||
|
margin-top: 124px; |
||||
|
margin-bottom: 24px; |
||||
|
margin-right: 24px; |
||||
|
padding: 224px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
background: var(--black-neutral4); |
||||
|
padding: 60px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
margin-left: 0; |
||||
|
margin-right: 0px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
padding: 24px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 400px) { |
||||
|
padding: 8px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .inner-content { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #fff; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
// sidebar start |
||||
|
.sidebar-containe { |
||||
|
background: var(--black-neutral4); |
||||
|
width: 250px; |
||||
|
position: fixed; |
||||
|
height: 100vh; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
transition: all 0.7s; |
||||
|
overflow-y: scroll; |
||||
|
z-index: 4; |
||||
|
&::-webkit-scrollbar { |
||||
|
display: none; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
transform: translateX(-300px); |
||||
|
} |
||||
|
.sidebar-logo { |
||||
|
padding: 40px 85px 70px 57px; |
||||
|
&:hover { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sidebar-menus { |
||||
|
list-style: none; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 32px; |
||||
|
padding: 0; |
||||
|
|
||||
|
.menu-item { |
||||
|
border-bottom: 1px solid #2b2b2b; |
||||
|
padding-bottom: 20px; |
||||
|
cursor: pointer; |
||||
|
} |
||||
|
.single-menu { |
||||
|
padding-left: 32px; |
||||
|
padding-right: 32px; |
||||
|
|
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.menu-link { |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
align-items: center; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .sidebar-containe .sidebar-menus .menu-item { |
||||
|
border-color: rgba(179, 182, 185, 0.5) !important; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .sidebar-containe { |
||||
|
background: #fff; |
||||
|
|
||||
|
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
.sidebar-show { |
||||
|
z-index: 3; |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
|
||||
|
.sidebar-hide { |
||||
|
z-index: 3; |
||||
|
transform: translateX(-300px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.sidebar-overlay { |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
z-index: 3; |
||||
|
background: black; |
||||
|
opacity: 0.5; |
||||
|
transition: all 0.8s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.sidebar-overlay-show { |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
|
||||
|
.sidebar-overlay-hide { |
||||
|
transform: translateX(-100%); |
||||
|
} |
||||
|
|
||||
|
.icon-normal { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.icon-rotate { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
.text-secondary { |
||||
|
color: var(--secondary-color) !important; |
||||
|
} |
||||
|
|
||||
|
.sidebar-menu-modal { |
||||
|
top: 0px; |
||||
|
padding: 24px 0; |
||||
|
margin: 0 32px; |
||||
|
background: var(--black-neutral3); |
||||
|
display: flex; |
||||
|
gap: 12px; |
||||
|
align-items: center; |
||||
|
flex-direction: column; |
||||
|
|
||||
|
.sidebar-sub-item { |
||||
|
border-bottom: 1px solid var(--black-neutral2); |
||||
|
padding-bottom: 20px; |
||||
|
width: 100%; |
||||
|
text-align: center; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .sidebar-sub-item { |
||||
|
border-color: #f9f8f8; |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .sidebar-menu-modal { |
||||
|
background: #bfbebe6b; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
// sidebar end |
||||
|
|
||||
|
// Footer start |
||||
|
|
||||
|
.footer-start { |
||||
|
direction: ltr; |
||||
|
} |
||||
|
|
||||
|
.footer-container { |
||||
|
bottom: 0; |
||||
|
transition: all 0.9s; |
||||
|
background: var(--accent1); |
||||
|
width: calc(100% - 250px); |
||||
|
transform: translateX(250px); |
||||
|
text-align: center; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
width: 100%; |
||||
|
transform: translateX(0px); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme="custom-light"] .footer-container { |
||||
|
background: #fff; |
||||
|
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; |
||||
|
} |
||||
|
|
||||
|
.dashboard-footer { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
padding: 36px 0; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dashboard-footer__copyright-text { |
||||
|
border-right: 1px solid #b3b6b9; |
||||
|
padding-right: 12px; |
||||
|
|
||||
|
@media (max-width: 400px) { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.footer-text-right { |
||||
|
padding-left: 12px; |
||||
|
|
||||
|
a { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
// Footer end |
||||
@ -0,0 +1,570 @@ |
|||||
|
.skills-tools-content { |
||||
|
border-radius: 24px; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
margin-top: 40px; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .skills-tools-content { |
||||
|
border-color: #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.skill-tools-sub-title { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: space-between; |
||||
|
padding: 32px 32px 20px 32px; |
||||
|
flex-wrap: wrap; |
||||
|
gap: 16px; |
||||
|
.subtitle { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
.subtitle-button { |
||||
|
padding: 12px 24px; |
||||
|
border-radius: 12px; |
||||
|
background: var(--secondary-color); |
||||
|
|
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
scale: 1.03; |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .skill-tools-sub-title .subtitle-button { |
||||
|
color: #fff; |
||||
|
} |
||||
|
|
||||
|
.skill-tools-table-area { |
||||
|
padding: 20px 32px 32px 32px; |
||||
|
border-top: 1px solid #2b2b2b; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .skill-tools-table-area { |
||||
|
border-color: rgba(179, 182, 185, 0.5); |
||||
|
} |
||||
|
|
||||
|
.skill-tools-top-area { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
|
||||
|
/* Dropdown.css */ |
||||
|
.dropdown-arrow-button { |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
} |
||||
|
|
||||
|
.dropdown-arrow-button-rotate-down { |
||||
|
transform: rotate(180deg); |
||||
|
} |
||||
|
|
||||
|
.dropdown-arrow-button-rotate-up { |
||||
|
transform: rotate(0deg); |
||||
|
} |
||||
|
|
||||
|
.dropdown-container { |
||||
|
position: relative; |
||||
|
display: inline-block; |
||||
|
} |
||||
|
|
||||
|
.dropdown-btn { |
||||
|
background-color: inherit; |
||||
|
color: var(--white-neutral1); |
||||
|
padding: 10px; |
||||
|
font-size: 16px; |
||||
|
border: none; |
||||
|
cursor: pointer; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 50px; |
||||
|
} |
||||
|
|
||||
|
.dropdown-content { |
||||
|
display: block; |
||||
|
position: absolute; |
||||
|
top: 100%; /* Position dropdown content below the button */ |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
background: var(--black-neutral3); |
||||
|
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2); |
||||
|
z-index: 1; |
||||
|
max-height: 0; |
||||
|
overflow: hidden; |
||||
|
transition: max-height 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); |
||||
|
border-radius: 12px; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .dropdown-content { |
||||
|
background: #fff; |
||||
|
} |
||||
|
|
||||
|
.dropdown-content.active { |
||||
|
max-height: 200px; |
||||
|
} |
||||
|
|
||||
|
.dropdown-option { |
||||
|
padding: 10px; |
||||
|
cursor: pointer; |
||||
|
transition: background-color 0.3s ease; |
||||
|
border-bottom: 1px solid var(--accent2); |
||||
|
|
||||
|
&:last-child { |
||||
|
border: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.dropdown-option:hover { |
||||
|
background-color: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
@keyframes fadeIn { |
||||
|
from { |
||||
|
opacity: 0; |
||||
|
} |
||||
|
to { |
||||
|
opacity: 1; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.search-field { |
||||
|
padding: 12px 20px; |
||||
|
border-radius: 12px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
background: inherit; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .search-field { |
||||
|
border-color: #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.skills-tools-table { |
||||
|
border-radius: 24px; |
||||
|
overflow: hidden; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive { |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
border-radius: 20px; |
||||
|
margin-top: 32px; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .table-skillresponsive { |
||||
|
border-color: #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive table { |
||||
|
margin-bottom: 0; |
||||
|
background: inherit; |
||||
|
} |
||||
|
.table-skillresponsive table thead th { |
||||
|
border-bottom: 1px solid var(--black-neutral2) !important; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .table-skillresponsive table thead th { |
||||
|
border-color: #6e6d6d6b !important; |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive table thead th .skill-title { |
||||
|
gap: 80px; |
||||
|
} |
||||
|
|
||||
|
.n0-color { |
||||
|
color: var(--white-neutral1) !important; |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive table thead th .skill-title .ttext { |
||||
|
font-size: 20px; |
||||
|
font-weight: 400; |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive table tbody tr:not(:last-child) { |
||||
|
border-bottom: 1px solid var(--black-neutral2); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .table-skillresponsive table tbody tr:not(:last-child) { |
||||
|
border-color: #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive table tbody tr:last-child { |
||||
|
border: unset; |
||||
|
} |
||||
|
.table-skillresponsive table tr th, |
||||
|
.table-skillresponsive table tr td { |
||||
|
padding: 20px 32px; |
||||
|
background: inherit; |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive tr td { |
||||
|
color: var(--white-neutral1); |
||||
|
opacity: 0.8; |
||||
|
} |
||||
|
|
||||
|
.table > :not(caption) > * > * { |
||||
|
border-bottom-width: 0px !important; |
||||
|
} |
||||
|
|
||||
|
.table-skillresponsive table tr th:not(:first-child), |
||||
|
.table-skillresponsive table tr td:not(:first-child) { |
||||
|
border-left: 1px solid var(--black-neutral2); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .table-skillresponsive table tr th:not(:first-child), |
||||
|
.table-skillresponsive table tr td:not(:first-child) { |
||||
|
border-left: 1px solid #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.cmn-downbtn { |
||||
|
width: 40px; |
||||
|
min-width: 40px; |
||||
|
height: 40px; |
||||
|
background: var(--black-neutral3); |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .cmn-downbtn { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #f6f1f1; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
|
||||
|
.cmn-downbtn:hover { |
||||
|
background: var(--secondary-color); |
||||
|
} |
||||
|
.cmn-downbtn:hover svg path { |
||||
|
stroke: #fff; |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .cmn-downbtn:hover svg path { |
||||
|
transition: all 0.4s; |
||||
|
stroke: #fff; |
||||
|
} |
||||
|
|
||||
|
.table-icon { |
||||
|
width: 40px; |
||||
|
min-width: 40px; |
||||
|
height: 40px; |
||||
|
background: var(--black-neutral3); |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
|
||||
|
.table-icon svg { |
||||
|
width: 21px; |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
.table-icon svg path { |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
.table-icon:hover { |
||||
|
cursor: pointer; |
||||
|
background: #ffce32; |
||||
|
} |
||||
|
.table-icon:hover svg path { |
||||
|
stroke: #fff; |
||||
|
} |
||||
|
|
||||
|
.table-icon2hover:hover { |
||||
|
background: #ff6900; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .table-icon { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.2); |
||||
|
background: #f6f1f1; |
||||
|
box-shadow: 0px 6px 30px 0px rgba(0, 0, 0, 0.04); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .table-icon:hover { |
||||
|
cursor: pointer; |
||||
|
background: #ffce32; |
||||
|
} |
||||
|
[theme='custom-light'] .table-icon:hover svg path { |
||||
|
stroke: #fff; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .table-icon2hover:hover { |
||||
|
background: #ff6900; |
||||
|
} |
||||
|
|
||||
|
.show-footer { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
gap: 16px; |
||||
|
} |
||||
|
.show-footer .coun { |
||||
|
padding: 11px 12px; |
||||
|
background: var(--secondary-color); |
||||
|
color: var(--white-neutral1); |
||||
|
font-size: 16px; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
} |
||||
|
.show-footer .coun span { |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
|
||||
|
.pre-pagination { |
||||
|
gap: 20px; |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
border-radius: 12px; |
||||
|
padding: 0 20px; |
||||
|
list-style: none; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .pre-pagination { |
||||
|
border-color: #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.cmn-downbtn { |
||||
|
width: 40px; |
||||
|
min-width: 40px; |
||||
|
height: 40px; |
||||
|
background: var(--black-neutral3); |
||||
|
border-radius: 4px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
transition: all 0.4s; |
||||
|
} |
||||
|
.cmn-downbtn:hover { |
||||
|
background: var(--secondary-color); |
||||
|
} |
||||
|
.cmn-downbtn:hover svg path { |
||||
|
stroke: var(--white-neutral1); |
||||
|
} |
||||
|
|
||||
|
.remove-items-modal .modal-content { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.3); |
||||
|
background: #1a1a1a; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .remove-items-modal .modal-content { |
||||
|
border-color: #6e6d6d6b; |
||||
|
background: #fff; |
||||
|
} |
||||
|
.remove-items-modal .modal-content .modal-header { |
||||
|
border-bottom: 1px solid rgba(179, 182, 185, 0.3); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .remove-items-modal .modal-content .modal-header { |
||||
|
border-bottom: 1px solid #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.remove-items-modal .modal-content .modal-footer { |
||||
|
border-top: 1px solid rgba(179, 182, 185, 0.3); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .remove-items-modal .modal-content .modal-footer { |
||||
|
border-top: 1px solid #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.remove-items-modal .modal-content .btn-close { |
||||
|
background: none; |
||||
|
width: 32px; |
||||
|
height: 32px; |
||||
|
border: 1px solid var(--white-neutral1); |
||||
|
opacity: 1; |
||||
|
padding: 0; |
||||
|
margin: 0; |
||||
|
border-radius: 50%; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
outline: none; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .remove-items-modal .modal-content .btn-close { |
||||
|
border: 1px solid #6e6d6d6b; |
||||
|
} |
||||
|
|
||||
|
.remove-items-modal .modal-content .btn-close::before { |
||||
|
content: '✖️'; |
||||
|
display: inline-block; |
||||
|
padding: 3px; |
||||
|
vertical-align: middle; |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
|
||||
|
.delte-alt { |
||||
|
padding: 12px 24px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
color: var(--white-neutral1); |
||||
|
border-radius: 12px; |
||||
|
} |
||||
|
.delte-alt span { |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
@media (max-width: 575px) { |
||||
|
.delte-alt { |
||||
|
padding: 8px 16px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.delte-two { |
||||
|
background: var(--black-neutral2) !important; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .delte-two { |
||||
|
background: #2b2b2b !important; |
||||
|
} |
||||
|
|
||||
|
.edit-modal-larges .imgwrapper { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
gap: 24px; |
||||
|
} |
||||
|
.edit-modal-larges .img-coverbox { |
||||
|
border: 1px dashed rgba(179, 182, 185, 0.3); |
||||
|
text-align: center; |
||||
|
padding: 16px 10px; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
height: 120px; |
||||
|
width: 180px; |
||||
|
} |
||||
|
.edit-modal-larges .img-coverbox img { |
||||
|
width: 30px; |
||||
|
} |
||||
|
.edit-modal-larges .img-coverbox input { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 100%; |
||||
|
display: block; |
||||
|
outline: none; |
||||
|
border: unset; |
||||
|
opacity: 0; |
||||
|
} |
||||
|
@media (max-width: 575px) { |
||||
|
.edit-modal-larges .imgwrapper { |
||||
|
gap: 10px; |
||||
|
flex-wrap: wrap; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.modal-center-text { |
||||
|
color: var(--white-neutral3); |
||||
|
} |
||||
|
|
||||
|
.s1-color { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
|
||||
|
.cmn-btn { |
||||
|
background-color: var(--secondary-color); |
||||
|
|
||||
|
&:hover { |
||||
|
background-color: #9c64e6; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cmn-btn { |
||||
|
padding: 12px 28px; |
||||
|
border-radius: 12px; |
||||
|
font-size: 16px; |
||||
|
color: var(--white-neutral1); |
||||
|
display: block; |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .delte-alt span { |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
.edit-data-category .catitem-box .nice-select { |
||||
|
background: var(--black-neutral3); |
||||
|
} |
||||
|
.edit-data-category .catitem-box .nice-select .current { |
||||
|
color: var(--white-neutral3); |
||||
|
padding: 10px 14px 14px; |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
.edit-data-category .catitem-box .nice-select .list { |
||||
|
background: var(--accent1); |
||||
|
padding: 10px 15px; |
||||
|
height: 26vh; |
||||
|
overflow-y: scroll; |
||||
|
} |
||||
|
.edit-data-category .catitem-box .nice-select .list li { |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
.edit-data-category .catitem-box .nice-select .list li:hover { |
||||
|
color: var(--secondary-color); |
||||
|
} |
||||
|
.edit-data-category .catitem-box input { |
||||
|
background: var(--black-neutral3); |
||||
|
padding: 10px 14px; |
||||
|
border: unset; |
||||
|
outline: none; |
||||
|
color: var(--white-neutral3); |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .edit-data-category .catitem-box input { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.5); |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
.edit-data-category .catitem-box ::-moz-placeholder { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
.edit-data-category .catitem-box ::placeholder { |
||||
|
font-size: 14px; |
||||
|
} |
||||
|
|
||||
|
.descrip { |
||||
|
color: var(--white-neutral1); |
||||
|
} |
||||
|
.descrip textarea { |
||||
|
background: var(--black-neutral3); |
||||
|
outline: none; |
||||
|
border: unset; |
||||
|
color: var(--white-neutral1); |
||||
|
border: 1px solid var(--black-neutral2); |
||||
|
font-size: 14px; |
||||
|
font-weight: 400; |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .descrip textarea { |
||||
|
border: 1px solid rgba(179, 182, 185, 0.5); |
||||
|
background: #efecec; |
||||
|
} |
||||
|
|
||||
|
.descrip ::-moz-placeholder { |
||||
|
font-size: 14px; |
||||
|
color: var(--white-neutral3); |
||||
|
line-height: 1.8; |
||||
|
} |
||||
|
.descrip ::placeholder { |
||||
|
font-size: 14px; |
||||
|
color: var(--white-neutral3); |
||||
|
line-height: 1.8; |
||||
|
} |
||||
|
|
||||
|
.n3-color { |
||||
|
color: var(--white-neutral3); |
||||
|
} |
||||
@ -0,0 +1,43 @@ |
|||||
|
/* 确保没有平滑滚动效果 */ |
||||
|
html { |
||||
|
scroll-behavior: auto !important; |
||||
|
} |
||||
|
ul, |
||||
|
ol, |
||||
|
li, |
||||
|
dl, |
||||
|
dt, |
||||
|
dd { |
||||
|
list-style: none; |
||||
|
} |
||||
|
a { |
||||
|
text-decoration: none; |
||||
|
outline: 0px; |
||||
|
color: #333; |
||||
|
} |
||||
|
img { |
||||
|
border: 0; |
||||
|
max-width: 100%; |
||||
|
} |
||||
|
@import 'bootstrap-custom.scss'; |
||||
|
@import 'variables'; |
||||
|
@import 'typography'; |
||||
|
@import 'common'; |
||||
|
@import 'pages/landing'; |
||||
|
@import 'pages/landing-two'; |
||||
|
@import 'pages/about-us'; |
||||
|
@import 'pages/all-projects'; |
||||
|
@import 'pages/project-details'; |
||||
|
@import 'pages/blog'; |
||||
|
@import 'pages/blog-details'; |
||||
|
@import 'pages/service'; |
||||
|
@import 'pages/contact'; |
||||
|
@import 'pages/not-found'; |
||||
|
@import 'them'; |
||||
|
@import 'dashboard/sidebarTopBarFooter'; |
||||
|
@import 'dashboard/personal-info'; |
||||
|
@import 'dashboard/skills-tools'; |
||||
|
@import 'dashboard/experiences'; |
||||
|
@import 'dashboard/all-blog'; |
||||
|
@import 'dashboard/new-blog'; |
||||
|
@import 'navbar'; |
||||
@ -0,0 +1,516 @@ |
|||||
|
.about-top-left-element { |
||||
|
overflow: hidden; |
||||
|
width: 906px; |
||||
|
height: 906px; |
||||
|
border-radius: 906px; |
||||
|
opacity: 0.1; |
||||
|
background: var(--primary-color); |
||||
|
filter: blur(200px); |
||||
|
position: absolute; |
||||
|
left: -450px; |
||||
|
top: -450px; |
||||
|
@media (max-width: 768px) { |
||||
|
width: 400px; |
||||
|
height: 400px; |
||||
|
right: 0px; |
||||
|
bottom: 0px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
width: 300px; |
||||
|
height: 300px; |
||||
|
right: 0px; |
||||
|
bottom: 0px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.about-card { |
||||
|
position: relative; |
||||
|
border-radius: 20px; |
||||
|
height: 100%; |
||||
|
border: 1px solid var(--black-neutral3); |
||||
|
background: rgba(34, 36, 38, 0.4); |
||||
|
} |
||||
|
|
||||
|
[theme='custom-light'] .about-card { |
||||
|
background: var(--black-neutral1); |
||||
|
border-color: rgba(34, 36, 38, 0.1); |
||||
|
} |
||||
|
.about-body { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
&__1st-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(12, 1fr); |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
.card-hello { |
||||
|
position: relative; |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 9; |
||||
|
|
||||
|
padding: 60px 112px 60px 60px; |
||||
|
@media (max-width: 1400px) { |
||||
|
padding: 24px 24px 24px 24px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
text-align: center; |
||||
|
} |
||||
|
|
||||
|
p { |
||||
|
font-weight: 300; |
||||
|
line-height: 150%; |
||||
|
margin-top: 24px; |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.card-profile-image { |
||||
|
grid-column-start: 9; |
||||
|
grid-column-end: 13; |
||||
|
padding: 34px 72px; |
||||
|
@media (max-width: 1400px) { |
||||
|
padding: 32px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-row-start: 1; |
||||
|
} |
||||
|
|
||||
|
&__image-container { |
||||
|
position: relative; |
||||
|
width: fit-content; |
||||
|
margin: 0 auto; |
||||
|
|
||||
|
.profile-image { |
||||
|
border-radius: 100%; |
||||
|
margin: 0 auto; |
||||
|
@media (max-width: 1400px) { |
||||
|
width: 200px; |
||||
|
height: 200px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.profile-shape { |
||||
|
position: absolute; |
||||
|
top: -6px; |
||||
|
left: -6px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
width: 210px; |
||||
|
height: 210px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__2nd-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(12, 1fr); |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
.my-experience { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 5; |
||||
|
@media (max-width: 1400px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 9; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
&__content { |
||||
|
margin-top: 40px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 24px; |
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
&-item { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
align-items: center; |
||||
|
p { |
||||
|
font-weight: 300; |
||||
|
line-height: 150%; |
||||
|
color: var(--white-neutral1); |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|
||||
|
.dash { |
||||
|
width: 16px; |
||||
|
height: 1px; |
||||
|
background: var(--white-neutral1); |
||||
|
opacity: 0.7; |
||||
|
max-width: auto 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.download-icon { |
||||
|
padding: 8px; |
||||
|
border: 1px solid var(--secondary-color); |
||||
|
border-radius: 100%; |
||||
|
cursor: pointer; |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
|
||||
|
&:hover { |
||||
|
background: var(--secondary-color); |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.what-i-do { |
||||
|
position: relative; |
||||
|
grid-column-start: 5; |
||||
|
grid-column-end: 8; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
grid-column-start: 9; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
&__content { |
||||
|
margin-top: 40px; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 16px; |
||||
|
|
||||
|
&-item { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
align-items: center; |
||||
|
p { |
||||
|
font-weight: 300; |
||||
|
line-height: 150%; |
||||
|
color: var(--white-neutral1); |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
|
||||
|
.dash { |
||||
|
width: 16px; |
||||
|
height: 1px; |
||||
|
background: var(--white-neutral1); |
||||
|
opacity: 0.7; |
||||
|
max-width: auto 0; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.experience-in-number { |
||||
|
padding: 40px 73px 40px 48px; |
||||
|
grid-column-start: 8; |
||||
|
grid-column-end: 13; |
||||
|
display: flex; |
||||
|
|
||||
|
justify-content: space-between; |
||||
|
flex-wrap: wrap; |
||||
|
|
||||
|
gap: 32px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
padding: 23px 32px 32px 32px; |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
flex-direction: row; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 390px) { |
||||
|
text-align: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
&__item { |
||||
|
display: flex; |
||||
|
gap: 8px; |
||||
|
flex-direction: column; |
||||
|
} |
||||
|
|
||||
|
&__item-number { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
justify-content: center; |
||||
|
} |
||||
|
|
||||
|
&__item-text { |
||||
|
font-weight: 300; |
||||
|
color: var(--white-neutral1); |
||||
|
opacity: 0.7; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__3rd-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(12, 1fr); |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[dir='ltr'] .group-shape { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 24px; |
||||
|
} |
||||
|
|
||||
|
[dir='rtl'] .group-shape { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 24px; |
||||
|
} |
||||
|
|
||||
|
[dir='ltr'] .bottom-shape { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
right: 0; |
||||
|
} |
||||
|
|
||||
|
[dir='rtl'] .bottom-shape { |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
transform: rotate(90deg); |
||||
|
} |
||||
|
|
||||
|
// [dir='ltr'] .about-body__1st-row .card-hello img { |
||||
|
// position: absolute; |
||||
|
// top: 20px; |
||||
|
// right: 20px; |
||||
|
// @media (max-width: 992px) { |
||||
|
// width: 70px; |
||||
|
// height: 70px; |
||||
|
// } |
||||
|
// @media (max-width: 576px) { |
||||
|
// width: 50px; |
||||
|
// height: 50px; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
// [dir='rtl'] .about-body__1st-row .card-hello img { |
||||
|
// position: absolute; |
||||
|
// top: 20px; |
||||
|
// left: 20px; |
||||
|
// transform: rotate(-90deg); |
||||
|
// @media (max-width: 992px) { |
||||
|
// width: 70px; |
||||
|
// height: 70px; |
||||
|
// } |
||||
|
// @media (max-width: 576px) { |
||||
|
// width: 50px; |
||||
|
// height: 50px; |
||||
|
// } |
||||
|
// } |
||||
|
|
||||
|
.about-profile { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 4; |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
// @media (max-width: 1400px) { |
||||
|
// grid-column-start: 1; |
||||
|
// grid-column-end: 4; |
||||
|
// } |
||||
|
|
||||
|
// @media (max-width: 992px) { |
||||
|
// grid-column-start: 1; |
||||
|
// grid-column-end: 7; |
||||
|
// } |
||||
|
|
||||
|
// @media (max-width: 576px) { |
||||
|
// grid-column-start: 1; |
||||
|
// grid-column-end: 13; |
||||
|
// } |
||||
|
|
||||
|
&__text { |
||||
|
font-weight: 300; |
||||
|
color: var(--white-neutral1); |
||||
|
opacity: 0.6; |
||||
|
margin-top: 18px; |
||||
|
} |
||||
|
|
||||
|
.about-profile-link { |
||||
|
margin-top: 0px !important; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.about-education { |
||||
|
grid-column-start: 4; |
||||
|
grid-column-end: 10; |
||||
|
position: relative; |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
justify-content: space-between; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
grid-column-start: 4; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-row-start: 1; |
||||
|
} |
||||
|
|
||||
|
&__title { |
||||
|
font-weight: 500; |
||||
|
color: var(--white-neutral1); |
||||
|
@media (max-width: 576px) { |
||||
|
padding-bottom: 40px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__content { |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 8px; |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
flex-direction: column; |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
.year { |
||||
|
font-weight: 300; |
||||
|
opacity: 0.6; |
||||
|
padding-top: 40px; |
||||
|
@media (max-width: 576px) { |
||||
|
padding-top: 0px; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.title { |
||||
|
font-weight: 400; |
||||
|
margin-top: 12px; |
||||
|
@media (max-width: 576px) { |
||||
|
margin-top: 8px; |
||||
|
} |
||||
|
} |
||||
|
.university { |
||||
|
font-weight: 300; |
||||
|
line-height: 150%; |
||||
|
opacity: 0.6; |
||||
|
margin-top: 4px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
[dir='ltr'] .about-education-shape { |
||||
|
position: absolute; |
||||
|
right: 20px; |
||||
|
top: 20px; |
||||
|
} |
||||
|
[dir='rtl'] .about-education-shape { |
||||
|
position: absolute; |
||||
|
left: 20px; |
||||
|
top: 20px; |
||||
|
transform: rotate(-90deg); |
||||
|
} |
||||
|
|
||||
|
.about-get-in-touch { |
||||
|
grid-column-start: 10; |
||||
|
grid-column-end: 13; |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 109px; |
||||
|
justify-content: space-between; |
||||
|
@media (max-width: 1400px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
gap: 40px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
grid-column-start: 7; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 576px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
|
||||
|
&__title { |
||||
|
font-weight: 500; |
||||
|
color: var(--white-neutral1); |
||||
|
white-space: nowrap; |
||||
|
@media (max-width: 1300px) { |
||||
|
white-space: normal; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
@ -0,0 +1,185 @@ |
|||||
|
.image-body { |
||||
|
position: relative; |
||||
|
transition: all 0.9s ease-in-out; |
||||
|
overflow: hidden; |
||||
|
width: fit-content; |
||||
|
&__image { |
||||
|
border-radius: 24px; |
||||
|
// object-fit: cover; |
||||
|
} |
||||
|
|
||||
|
.all-project-link { |
||||
|
color: var(--white-neutral1); |
||||
|
display: flex; |
||||
|
justify-content: space-between; |
||||
|
gap: 8px; |
||||
|
align-items: end; |
||||
|
padding: 32px; |
||||
|
position: absolute; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
width: 100%; |
||||
|
height: 0; |
||||
|
opacity: 0; |
||||
|
box-sizing: border-box; |
||||
|
transition: all 0.6s ease-in-out; |
||||
|
visibility: hidden; |
||||
|
background: linear-gradient( |
||||
|
180deg, |
||||
|
rgba(136, 136, 136, 0) 0%, |
||||
|
rgba(29, 29, 29, 0.8) 98.75% |
||||
|
); |
||||
|
border-radius: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
padding: 24px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
padding: 16px; |
||||
|
} |
||||
|
|
||||
|
&__text-area { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 12px; |
||||
|
|
||||
|
@media (max-width: 992px) { |
||||
|
gap: 4px; |
||||
|
} |
||||
|
|
||||
|
.link-title { |
||||
|
color: #fff !important; |
||||
|
} |
||||
|
|
||||
|
.link-text { |
||||
|
font-weight: 300 !important; |
||||
|
color: #fff; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&__image { |
||||
|
img { |
||||
|
max-width: 100px; |
||||
|
max-height: 60px; |
||||
|
transition: all 0.3s ease-in-out; |
||||
|
&:hover { |
||||
|
transform: rotate(-10deg); |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
display: none; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&:hover .all-project-link { |
||||
|
opacity: 1; |
||||
|
height: 100%; |
||||
|
visibility: visible; |
||||
|
} |
||||
|
} |
||||
|
.all-project-body { |
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 24px; |
||||
|
position: relative; |
||||
|
z-index: 2; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
.all-project__1st-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(12, 1fr); |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
&-1st-column { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 7; |
||||
|
|
||||
|
display: flex; |
||||
|
flex-direction: column; |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-2nd-column { |
||||
|
grid-column-start: 7; |
||||
|
grid-column-end: 13; |
||||
|
|
||||
|
@media (max-width: 768px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.all-project__3rd-row { |
||||
|
display: grid; |
||||
|
grid-template-columns: repeat(12, 1fr); |
||||
|
gap: 24px; |
||||
|
|
||||
|
@media (max-width: 1400px) { |
||||
|
gap: 20px; |
||||
|
} |
||||
|
|
||||
|
@media (max-width: 1200px) { |
||||
|
gap: 18px; |
||||
|
} |
||||
|
@media (max-width: 992px) { |
||||
|
gap: 16px; |
||||
|
} |
||||
|
|
||||
|
&-1st-column { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 7; |
||||
|
@media (max-width: 768px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
&-2nd-column { |
||||
|
grid-column-start: 7; |
||||
|
grid-column-end: 13; |
||||
|
@media (max-width: 768px) { |
||||
|
grid-column-start: 1; |
||||
|
grid-column-end: 13; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
Some files were not shown because too many files changed in this diff
Loading…
Reference in new issue