You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
490 lines
8.9 KiB
490 lines
8.9 KiB
@import './constants/colors.scss'; |
|
@import './components/BreadCrumbs/index.scss'; |
|
@import './components/GradeFilter/index.scss'; |
|
@import './components/HomeSearchBox/index.scss'; |
|
@import './components/Location/index.scss'; |
|
@import './components/Navbar/index.scss'; |
|
@import './components/NavbarDrawer/NavbarDrawer.scss'; |
|
@import './components/Textarea/index.scss'; |
|
@import './components/Timer/index.scss'; |
|
@import './components/Vocal/Vocal.scss'; |
|
@import './views/Auth/index.scss'; |
|
@import './views/About/index.scss'; |
|
@import './views/Contact/index.scss'; |
|
@import './views/Course/index.scss'; |
|
@import './views/Courses/index.scss'; |
|
@import './views/Faq/index.scss'; |
|
@import './views/Home/index.scss'; |
|
@import './views/Subscription/index.scss'; |
|
@import './views/VideoTube/index.scss'; |
|
|
|
.submit { |
|
background-color: $green; |
|
color: white; |
|
border-radius: 6px; |
|
border: 0px; |
|
font-weight: 300; |
|
} |
|
|
|
.mobile, |
|
.desktop { |
|
display: flex; |
|
} |
|
|
|
.bg-black{ |
|
background-color: black !important; |
|
.MuiFormControl-root { |
|
color: $gray7 !important; |
|
label { |
|
background: black !important; |
|
color: #b5b5b5; |
|
} |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
border-color: $gray4 !important; |
|
color: green !important; |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
color: $green4 !important; |
|
&:focus { |
|
border: 1px solid $green4 !important; |
|
} |
|
} |
|
|
|
|
|
.MuiInputLabel-shrink { |
|
background-color: black !important; |
|
color: $green4 !important; |
|
} |
|
|
|
.Mui-focused { |
|
color: rgba(0, 0, 0, 1) !important; |
|
border-color: $green4 !important; |
|
color: $green4 !important; |
|
} |
|
|
|
} |
|
|
|
.bg-white{ |
|
background-color: white !important; |
|
.MuiFormControl-root { |
|
color: $gray7 !important; |
|
label { |
|
background: white !important; |
|
color: #b5b5b5; |
|
} |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
border-color: $green1 !important; |
|
color: green !important; |
|
background-color: white; |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
color: $gray5 !important; |
|
&:focus { |
|
border: 1px solid $green4 !important; |
|
} |
|
} |
|
|
|
|
|
.MuiInputLabel-shrink { |
|
background-color: black !important; |
|
color: $green4 !important; |
|
} |
|
|
|
.Mui-focused { |
|
color: rgba(0, 0, 0, 1) !important; |
|
border-color: $green4 !important; |
|
color: $green4 !important; |
|
} |
|
} |
|
|
|
p { |
|
line-height: 1.5; |
|
} |
|
|
|
.submit-large { |
|
padding: 12px 24px; |
|
} |
|
|
|
.submit-medium { |
|
padding: 10px 20px; |
|
} |
|
|
|
.submit-small { |
|
padding: 8px 16px; |
|
} |
|
|
|
.rec-arrow-left { |
|
top: calc(50% - 22px) !important; |
|
right: -20px !important; |
|
} |
|
|
|
.rec-arrow-right { |
|
top: calc(50% - 22px) !important; |
|
left: -20px !important; |
|
} |
|
|
|
.rec-dot_active { |
|
background-color: green !important; |
|
color: white !important; |
|
// box-shadow: 0 0 1px rgba(255, 255, 255, 1) !important; |
|
} |
|
|
|
.Carousel-button-10 { |
|
background-color: white !important; |
|
} |
|
.rec-pagination { |
|
z-index: 200; |
|
// left: calc(50% - 20px) !important; |
|
& button { |
|
background-color: white; |
|
margin: 2px !important; |
|
box-shadow: 0px 0px 0px rgba(100, 100, 100, 1); |
|
&:focus { |
|
box-shadow: 0px 0px 0px rgba(100, 100, 100, 1); |
|
} |
|
} |
|
} |
|
|
|
.rec-slider-container { |
|
margin: 0px !important; |
|
} |
|
|
|
.rec-arrow { |
|
position: absolute !important; |
|
z-index: 100; |
|
background-color: inherit !important; |
|
box-shadow: none !important; |
|
border: 0px !important; |
|
color: white !important; |
|
&:focus { |
|
color: white !important; |
|
} |
|
&:disabled { |
|
color: black !important; |
|
display: none !important; |
|
} |
|
&:enabled { |
|
color: white !important; |
|
} |
|
&:hover { |
|
color: white; |
|
} |
|
} |
|
|
|
.rec-slider-container { |
|
border-radius: 10px; |
|
} |
|
|
|
.main { |
|
width: 100%; |
|
overflow-x: hidden; |
|
padding-top: 60px; |
|
min-height: 100vh; |
|
position: relative; |
|
padding-bottom: 20px; |
|
font-family: numeralLight; |
|
&__light{ |
|
background: white; |
|
} |
|
&__dark{ |
|
background : black; |
|
} |
|
.footer { |
|
position: absolute; |
|
bottom: 0px; |
|
left: 0px; |
|
} |
|
main { |
|
width: 100%; |
|
margin: 0px auto; |
|
} |
|
} |
|
|
|
.MuiFormControl-root { |
|
width: 100%; |
|
margin: 10px auto !important; |
|
.MuiSelect-iconOutlined { |
|
display: none; |
|
} |
|
.MuiSelect-outlined.MuiSelect-outlined { |
|
padding-right: 15px; |
|
} |
|
color: $gray7 !important; |
|
} |
|
|
|
.MuiSelect-select:focus { |
|
// background-color: inherit !important; |
|
// color: #4d4d4d !important; |
|
border: 1px solid #707070; |
|
} |
|
|
|
.MuiMenu-list { |
|
} |
|
|
|
//INPUT |
|
.MuiFormControl-root { |
|
width: 100%; |
|
margin: 10px auto !important; |
|
.MuiSelect-iconOutlined { |
|
display: none; |
|
} |
|
.MuiSelect-outlined.MuiSelect-outlined { |
|
padding-right: 15px; |
|
} |
|
color: $gray7 !important; |
|
label { |
|
width: fit-content; |
|
text-align: center; |
|
} |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
top: 0px !important; |
|
} |
|
.MuiOutlinedInput-notchedOutline { |
|
border-color: $gray4 !important; |
|
border-width: 1px !important; |
|
border-radius: 10px !important; |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
padding: 15px 14px !important; |
|
font-family: numeralLight; |
|
&:focus { |
|
border-radius: 10px; |
|
transform: translateY(0px); |
|
border-radius: 10px !important; |
|
z-index: 120; |
|
} |
|
} |
|
.MuiInputLabel-outlined { |
|
font-family: numeralLight !important; |
|
display: inline !important; |
|
position: absolute; |
|
text-align: right !important; |
|
right: 15px !important; |
|
top: 50% !important; |
|
padding: 0px !important; |
|
transform: translate(0px, -50%) scale(1) !important; |
|
} |
|
.MuiInputLabel-shrink { |
|
text-align: center !important; |
|
display: inline; |
|
position: absolute; |
|
right: 0px !important; |
|
top: -8px !important; |
|
transform: translate(0px, 0px) scale(0.85) !important; |
|
padding: 0px 10px !important; |
|
z-index: 130 !important; |
|
} |
|
|
|
.MuiInputBase-input { |
|
height: auto !important; |
|
} |
|
|
|
//SELECT |
|
.MuiMenuItem-root { |
|
background: #272727 !important; |
|
border-bottom: 1px solid #707070 !important; |
|
color: white !important; |
|
font-size: 14px !important; |
|
font-family: numeralLight !important; |
|
padding: 20px !important; |
|
} |
|
|
|
.MuiSelect-root { |
|
font-family: numeralLight !important; |
|
color: white !important; |
|
} |
|
|
|
.MuiOutlinedInput-notchedOutline legend { |
|
display: none !important; |
|
} |
|
|
|
//JOL PLayer |
|
.tooltip { |
|
opacity: 1 !important; |
|
transform: translateY(-2px) !important; |
|
} |
|
|
|
//Menu |
|
.bg-black{ |
|
.MuiButton-root { |
|
color: white !important; |
|
} |
|
} |
|
.MuiButton-root { |
|
font-family: numeralLight !important; |
|
span { |
|
margin-left: 0px !important; |
|
margin-right: 5px; |
|
} |
|
} |
|
|
|
.MuiPopover-paper{ |
|
transform : translateX(50%) !important; |
|
} |
|
|
|
.MuiPaper-root { |
|
.MuiList-root { |
|
display: flex !important; |
|
width: 200px !important; |
|
flex-wrap: wrap !important; |
|
li { |
|
width: 100px; |
|
display: flex !important; |
|
justify-content: center !important; |
|
text-align: center !important; |
|
padding: 0px !important; |
|
a{ |
|
color: white; |
|
width: 100%; |
|
height: 100%; |
|
padding: 5px 0px; |
|
} |
|
&:nth-child(even) { |
|
border-right: 1px solid #555 !important; |
|
} |
|
} |
|
} |
|
} |
|
|
|
|
|
//Toastify |
|
.Toastify{ |
|
*{ |
|
font-family: numeralLight !important; |
|
} |
|
} |
|
|
|
//Loader |
|
.full-loader{ |
|
display: flex; |
|
justify-content: center; |
|
align-items: center; |
|
width: 100%; |
|
height: 100vh; |
|
z-index: 1000; |
|
background-color: rgba(0, 0, 0, 0.261); |
|
position: fixed; |
|
top: 0px; |
|
left: 0px; |
|
} |
|
|
|
//blur filter |
|
.blur{ |
|
filter: blur(8px); |
|
} |
|
|
|
|
|
@media screen and (min-width: 1441px) { |
|
.submit { |
|
font-size: 16px; |
|
} |
|
.main { |
|
main { |
|
max-width: 1350px; |
|
} |
|
} |
|
.mobile { |
|
display: none !important; |
|
} |
|
.MuiFormControl-root { |
|
label { |
|
font-size: 14px; |
|
} |
|
} |
|
.MuiOutlinedInput-input { |
|
font-size: 20px; |
|
} |
|
.MuiPaper-root { |
|
.MuiList-root { |
|
li { |
|
font-size: 13px !important; |
|
} |
|
} |
|
} |
|
} |
|
|
|
@media screen and (min-width: 1008px) and (max-width: 1440px) { |
|
.submit { |
|
font-size: calc(100vw / 80); |
|
} |
|
.main { |
|
main { |
|
max-width: 1250px; |
|
} |
|
} |
|
.mobile { |
|
display: none !important; |
|
} |
|
.MuiFormControl-root { |
|
label { |
|
font-size: calc(100vw / 110) !important; |
|
} |
|
} |
|
|
|
.MuiPaper-root { |
|
.MuiList-root { |
|
width : 160px !important; |
|
li { |
|
width : 80px !important; |
|
font-size: calc(100vw / 110) !important; |
|
} |
|
} |
|
} |
|
|
|
.MuiOutlinedInput-input { |
|
font-size: calc(100vw / 80) !important; |
|
} |
|
} |
|
|
|
@media screen and (min-width: 641px) and (max-width: 1007px) { |
|
.main { |
|
main { |
|
max-width: 900px; |
|
} |
|
} |
|
.desktop { |
|
display: none !important; |
|
} |
|
.submit-large { |
|
font-size: calc(100vw / 38) !important; |
|
} |
|
.MuiFormControl-root { |
|
label { |
|
font-size: calc(100vw / 40) !important; |
|
} |
|
} |
|
.MuiOutlinedInput-input { |
|
font-size: calc(100vw / 45) !important; |
|
} |
|
} |
|
|
|
@media screen and (max-width: 640px) { |
|
.main { |
|
main { |
|
max-width: 500px; |
|
} |
|
} |
|
.desktop { |
|
display: none !important; |
|
} |
|
.submit { |
|
font-size: calc(100vw / 25) !important; |
|
} |
|
.MuiFormControl-root { |
|
label { |
|
font-size: calc(100vw / 30) !important; |
|
} |
|
} |
|
.MuiOutlinedInput-input { |
|
font-size: calc(100vw / 30) !important; |
|
} |
|
.MuiSelect-select { |
|
line-height: 1.5 !important; |
|
} |
|
}
|
|
|