sridhar.r
/
PozoAppOptimandSEO
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
PozoAppOptimandSEO/src/index.css

544 lines
9.1 KiB
CSS
Raw Blame History

:root {
/* component variables */
--INPUT_FIELD_WIDTH: min(60vw, 250px);
/* application common variables */
--HEADING_COLOR: #000000;
--HEADING_FONT_FAMILY: 'Gilroy';
--PARA_FONT_FAMILY: 'Poppins';
--PARA_COLOR: #3F3F3F;
--PRIMARY_BUTTON_BG_COLOR: #8F1E78;
--PRIMARY_BUTTON_COLOR: #FFFFFF;
--PRIMARY_BUTTON_BORDER_RADIUS: 6px;
--SECONDRY_BUTTON_BG_COLOR: white;
--SECONDRY_BUTTON_COLOR: #000000;
--SECONDRY_BUTTON_BORDER_RADIUS: 25.6853px;
--THIRD_BUTTON_BG_COLOR: #060606;
--THIRD_BUTTON_COLOR: #EFEFEF;
--THIRD_BUTTON_BORDER_RADIUS: 6.53329px;
--BOX_SHADOW_LEVEL1: 0px 4px 15px rgba(0, 0, 0, 0.1);
--BOX_SHADOW_LEVEL2: 0px 4px 25px rgba(0, 0, 0, 0.2);
--BOX_SHADOW_LEVEL3: 0px 5.25331px 26.3077px rgba(0, 0, 0, 0.08);
--CARD_BG_COLOR: rgba(255, 255, 255, 0.6);
--CARD_COLOR: #000000;
--CARD_FONT_FAMILY: 'Gilroy-Medium';
--CARD_BORDER_RADIUS: 10px;
--ANCHOR_FONT_FAMILY: 'Manrope';
--ANCHOR_COLOR: #314259;
--BUTTON_FONT_FAMILY: 'Gilroy-Medium';
--BREAD_CRUMB_PADDING: 1rem;
--TABLE_PAGE_PADDING: 1rem;
/* Page common funtion */
--PAGE_BODY_BACKGROUND_COLOR: #E8ECF1;
--SELECTED_COLOR: #52C41A;
--ERROR_COLOR: #FF4D4F;
--DEFAULT_SELECTED_COLOR: #1292EE;
overflow-x: hidden;
}
* {
padding: 0px;
margin: 0px;
box-sizing: border-box;
}
p {
font-family: VAR(--PARA_FONT_FAMILY);
}
button {
font-family: var(--BUTTON_FONT_FAMILY);
}
header {
font-family: VAR(--HEADING_FONT_FAMILY);
}
a {
font-family: var(--ANCHOR_FONT_FAMILY);
}
.ant-collapse {
/* width:clamp(55dvw,50dvw,50dvw); */
/* width: min(100vw,572px); */
font-style: normal;
font-weight: 600;
font-size: 15.2968px;
/* // line-height: 149.5%;
// color: #000000;
// padding: 0px 39px; */
}
.ant-collapse-large >.ant-collapse-item >.ant-collapse-header {
padding: 16px 24px;
background: white;
}
.ant-collapse-item-active > .ant-collapse-header {
box-sizing: border-box;
/* border: 0.3px solid #252222; */
border-radius: 6px;
}
.Home-navbar {
position: sticky;
z-index: 2;
align-items: baseline;
justify-content: space-evenly;
align-items: center;
display: flex;
width: 100vw;
top:0rem;
left:0rem;
height:9vh;
margin: 0vw 0vh;
/* padding: 1vw 8vh; */
font-size: 23px;
font-family: var(--HEADING_FONT_FAMILY);
/* font-weight: 550; */
background-color:#ffffffa4;
backdrop-filter: blur(10px);
box-shadow: 0px 4px 150px rgba(0, 0, 0, 0.1);
}
.extra_small_nav{
margin:0vw 0vh;
width:70vw;
display: flex;
justify-content:space-around;
font-size: 13.2px;
}
.extra_small_div{
display: flex;
flex-wrap: wrap;
flex-direction: row;
row-gap: 0rem !important;
justify-content: space-around;
text-transform: uppercase;
align-items: center !important;
}
@media (min-width:279px) and (max-width: 999px) {
.toggle-container{
/* padding: 2vw 2vh !important; */
display: flex !important;
position: fixed !important;
/* width: 100% !important; */
/* display: none !important; */
}
.extra_small_nav{
display: none !important;
}
.tgle-icons{
display:flex;
width: 25%;
justify-content:space-around;
}
.small-nav{
opacity: 12% !important;
}
.extranav{
display: none;
}
}
@media (min-width: 390px) and (max-width: 498px) {
.collapsed-menu{
padding: 1vw 1vh;
}
}
@media all and (max-width: 499px){
.Home-navbar {
display: none;
}
.extranav{
display: none;
}
.extra_small_div{
font-size: 14px !important;
text-transform: uppercase;
}
.extra_small_nav{
margin:0vw 0vh;
width:70vw;
display: flex;
justify-content:space-around;
font-size: 13.2px;
}
/* .ant-collapse {
width: 75vh !important;
} */
.content_container{
}
}
@media (max-width: 1024px){
.Home-navbar{
display: flex;
height: 50px;
align-items: center;
justify-content: space-between;
}
}
@media (min-width: 899px) and (max-width: 1072px){
.Home-navbar {
/* display: none; */
padding: 3rem 0rem !important;
}
.extranav{
display: none;
}
.extra_small_div{
font-size: 14px !important;
color: #000000;
font-family: var(--PARA_FONT_FAMILY);
}
}
@media (min-width: 500px) and (max-width: 600px) {
.extra_small_nav{
display: none;
}
}
/* // .logo {
// margin-right: 10px;
// } */
.menu-container {
display: flex;
justify-content: space-evenly;
flex-direction: row;
color:#000000 !important;
row-gap: 23rem;
}
.toggle-container {
display:none;
top: 0;
flex-wrap: wrap;
flex-direction: row;
/* padding: 2vw 3vh; */
width: 100vw;
align-items: center;
justify-content:space-between;
position:fixed;
z-index: 23;
background-color:#f7f7f7;
box-shadow: 0px 4px 150px rgba(0, 0, 0, 0.1);
}
.tgle-icons{
display:flex;
width: 25%;
justify-content:space-around;
}
.toggle-button {
cursor: pointer;
font-size: 16px;
}
.ant-collapse {
/* width: min(91vw, 780px); */
/* width: 100% !important; */
/* font-style: normal; */
margin: 2vw 2vh;
}
.Dept_side{
margin: 2vw 4vh;
/* padding: 2vw 4vh; */
width:40vw;
/* height: min(40vw, 700px); */
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: space-between;
}
.Acc_btn{
background-color: #000;
width:45vw;
height:7vh;
align-items: center;
font-size:14px;
display:flex;
border-radius:6px;
justify-content:center;
color:#fff;
cursor: pointer;
}
.collapsed-menu {
/* width: 100vw;
/* height:100vh; */
background-color:#31313154;
transition: 0.1s ease-out;
overflow-y: scroll;
overflow-x: hidden;
width: 100%;
height: 100vh;
position: fixed;
top: 4rem;
z-index: 1;
backdrop-filter: blur(10px);
}
.anticon{
/* display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-end; */
cursor: pointer;
}
.ant-select-single.ant-select-show-arrow .ant-select-selection-item, .ant-select-single.ant-select-show-arrow .ant-select-selection-placeholder {
padding-inline-end: 54px;
text-align: initial;
padding: 0.3vw;
font-size: 14px;
color: #626262;
font-weight: 400;
font-family: "Poppins", sans-serif;
}
.ant-menu-light.ant-menu-horizontal >.ant-menu-item{
margin: 1.5vw 1.4vh;
font-size: 2.6vh;
/* font-family: 'Poppins'; */
font-family: var(--HEADING_FONT_FAMILY) !important;
}
.ant-menu-light {
/* background: #fff !important; */
border-radius: 12.9916px;
padding-inline: 0rem;
/* margin-inline: 1rem; */
}
.nav_right_items{
display: flex;
justify-content: space-between
}
.ant-menu-title-content {
flex-direction: column;
display: flex;
/* align-items: center; */
/* font-size: 14px;
font-weight: 400; */
text-transform: uppercase;
}
.ico{
font-size:12px !important;
align-items: center;
margin: 0.4vw 0vh;
}
.ico-menu{
display: flex;
text-align: center;
}
.nav-btn {
font-size: 15px !important;
height: 54px;
/* text-transform: uppercase; */
font-weight: 510;
letter-spacing: 0.1px;
border: none;
color: #11181c;
padding: 4px 0px;
}
.nav-btn:hover {
font-size: 15px !important;
height: 54px;
/* text-transform: uppercase; */
/* font-weight: 500; */
letter-spacing: 0.1px;
border: none;
color: #0f67da;
padding: 4px 0px;
}
.FreeAccBtn{
width: 220px;
height:45px;
display:flex;
justify-content: center;
border-radius:6px;
/* background-color: #f0f0f0; */
background-color: #8F1E78;
/* border: #000 solid 1.5px; */
color: #ffffff;
font-weight: 550;
margin: 0.2vw 0vh;
font-size: 15px;
align-items: center;
align-content: center;
text-align: center;
transition-duration:0.20s;
}
.FreeAccBtn:hover{
width: 220px;
height:45px;
display:flex;
justify-content: center;
border-radius:6px;
background-color: #ffffff;
border: #8F1E78 solid 1.5px;
color: #8F1E78;
margin: 0.2vw 0vh;
font-size: 15px;
align-items: center;
align-content: center;
text-align: center;
text-decoration: none;
transition-duration:0.20s;
}
.sml_icons{
display: flex;
align-items: space-around;
}
/* '''''''''''''''''''''''''''''?'? */
/* ScrollBar */
::-webkit-scrollbar {
width: 2px;
}
/* Track */
::-webkit-scrollbar-track {
background: #f1f1f1;
}
/* Handle */
::-webkit-scrollbar-thumb {
background: #999999;
}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
/* background: #8F1E78; */
}
::-webkit-scrollbar {
display: none;
}
/* EditorJS Custom Styles */
.ce-toolbar__plus.custom-cursor-on-hover {
cursor: pointer !important;
transition: all 0.2s ease;
}
.ce-toolbar__plus.custom-cursor-on-hover:hover {
transform: scale(1.1);
background: #3b82f6 !important;
color: white !important;
}
.ce-block--selected .ce-block__content {
background: rgba(59, 130, 246, 0.1) !important;
border-radius: 8px;
}
.codex-editor {
border-radius: 12px;
border: 1px solid #e5e7eb;
}
.ce-toolbar__content {
max-width: none !important;
}
.ce-popover {
border-radius: 12px !important;
box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
}
Reference in New Issue View Git Blame Copy Permalink