Created
November 10, 2019 23:59
-
-
Save mohammedmatar/fecc5b35272de061eada9c094a4a6e00 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* Base */ | |
/* APP SCSS */ | |
/*Typography*/ | |
/*Colors*/ | |
html, body { | |
font-family: 'NeueFrutigerWorld',sans-serif !important; | |
font-weight: lighter; | |
font-size: 12px; | |
height: 100%; | |
position: relative; | |
text-align: right; } | |
a { | |
color: #333; | |
text-decoration: none; | |
outline: none; } | |
a:hover { | |
color: #273fdf; | |
outline: none; } | |
a:hover:active { | |
outline: none; | |
color: #273fdf; } | |
a:hover:focus { | |
outline: none; | |
box-shadow: none; } | |
a:link { | |
text-decoration: none; | |
outline: none; } | |
.hvr-underline-from-center:before { | |
background: #273fdf; } | |
.font-Black { | |
font-family: 'NeueFrutigerWorld',sans-serif; | |
font-weight: 700; } | |
.font-Bold { | |
font-family: 'NeueFrutigerWorld',sans-serif; | |
font-weight: 700; } | |
.font-ExtraLight { | |
font-family: 'NeueFrutigerWorld',sans-serif; | |
font-weight: 300; } | |
.font-Light { | |
font-family: 'NeueFrutigerWorld',sans-serif; | |
font-weight: 400; } | |
.font-Regular { | |
font-family: 'NeueFrutigerWorld',sans-serif; | |
font-weight: 600; } | |
.main_logo { | |
width: 140px !important; } | |
.container-fluid > .row { | |
margin-right: 0; } | |
.profile-menu > a { | |
color: #000 !important; | |
background: #fff !important; } | |
.profile-menu > a:hover { | |
color: #000; } | |
.profile-menu span { | |
vertical-align: baseline; } | |
.profile-menu .image img { | |
width: 45px; | |
height: 45px; | |
border-radius: 50%; } | |
.profile-menu .welcome { | |
color: #273fdf; | |
margin-right: 5px; } | |
.profile-menu .fullname { | |
font-weight: bold; | |
margin-right: 5px; | |
margin-left: 10px; } | |
h1.page-title { | |
margin: 50px 0px; } | |
h1.page-title::before { | |
content: '-'; | |
width: 150px; | |
color: #273fdf; | |
background-color: #273fdf; | |
padding: 0px 5px; | |
display: inline-block; | |
height: 15px; | |
line-height: 5px; } | |
.home-items .nav-link { | |
padding: 60px 0; } | |
.emp-btn { | |
margin-right: 5px; } | |
.table { | |
font-size: 1.2rem; | |
text-align: center; } | |
.table thead td { | |
background-color: #eaeaea; | |
padding: 20px; | |
font-weight: bold; } | |
.table tbody td { | |
padding: 10px 20px; } | |
.table.table-striped tbody tr:nth-of-type(odd) { | |
background: #fff; } | |
.table.table-striped tbody tr:nth-of-type(even) { | |
background: #F4F6F7; } | |
.modal-backdrop.show { | |
opacity: 0.85; } | |
.modal { | |
direction: rtl; } | |
.modal .modal-header { | |
border: none; } | |
.modal .modal-header h5 { | |
padding: 50px 0 30px 0; | |
font-weight: 600; | |
font-size: 1.8em; } | |
.modal .modal-content { | |
border: none; | |
border-radius: 14px; } | |
.modal .modal-body { | |
border: none; | |
padding: 0 40px; } | |
.modal .modal-footer { | |
border: none; | |
padding: 0 40px; | |
padding-bottom: 30px; } | |
.course-content { | |
padding-top: 60px; } | |
.course-content .controls { | |
direction: rtl; | |
overflow: hidden; | |
clear: both; | |
text-align: center; | |
direction: rtl !important; } | |
.course-content .controls > div { | |
display: inline-block; | |
width: auto !important; | |
height: auto !important; } | |
.is-fullscreen .course-content { | |
padding-top: 0; } | |
.profile-menu .dropdown-item { | |
border-radius: 0; } | |
.profile-menu .dropdown-item.active:focus, .profile-menu .dropdown-item:focus { | |
outline: none; | |
box-shadow: none; } | |
.profile-menu .dropdown-item.active, .profile-menu .dropdown-item.active:hover, .profile-menu .dropdown-item:active, .profile-menu .dropdown-item:active:hover { | |
background: #273fdf; | |
color: #fff !important; } | |
.profile-menu .dropdown-menu { | |
padding: 0; } | |
.loaders { | |
height: 100%; | |
line-height: 300px; | |
background-color: #fff; | |
color: #555; | |
font-size: 1.3em; } | |
.loader { | |
display: inline-block; | |
position: relative; | |
width: 50px; | |
height: 50px; | |
vertical-align: middle; } | |
/* $Loader Quadrant | |
========================================================================== */ | |
.loader-quart { | |
border-radius: 50px; | |
margin: 0 20px; | |
border: 6px solid rgba(65, 170, 102, 0.48); } | |
.loader-quart:after { | |
content: ""; | |
position: absolute; | |
top: -6px; | |
right: -6px; | |
bottom: -6px; | |
left: -6px; | |
border-radius: 50px; | |
border: 6px solid transparent; | |
border-top-color: #273fdf; | |
-webkit-animation: spin 1s linear infinite; | |
animation: spin 1s linear infinite; } | |
@-webkit-keyframes spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
tranform: rotate(0deg); } | |
100% { | |
-webkit-transform: rotate(360deg); | |
tranform: rotate(360deg); } } | |
@keyframes spin { | |
0% { | |
-webkit-transform: rotate(0deg); | |
tranform: rotate(0deg); } | |
100% { | |
-webkit-transform: rotate(360deg); | |
tranform: rotate(360deg); } } | |
.modal .message { | |
font-size: 1.5em; | |
text-align: center; | |
line-height: 2em; | |
margin-bottom: 1em; } | |
.ContactModal { | |
padding: 0 !important; } | |
.ContactModal .modal-dialog { | |
max-width: 400px; } | |
.ContactModal .modal-content { | |
border-radius: 5px; } | |
.ContactModal .modal-body { | |
border: none; | |
padding: 0 10px; | |
font-size: 10px; } | |
.ContactModal .modal-footer { | |
border: none; | |
display: block; | |
padding: 0 10px; | |
padding-bottom: 10px; } | |
.ContactModal .btn { | |
border-radius: 5px; | |
width: 130px; | |
float: left; } | |
.ContactModal .btn-secondary { | |
float: right; } | |
.ContactModal .modal-header h5 { | |
padding: 10px 0; | |
margin: 0 !important; | |
font-size: 18px; | |
text-align: center !important; | |
display: block; | |
width: 100%; } | |
.main_menu ul li::before { | |
background-color: #273fdf; } | |
.main_menu ul li.active { | |
background-color: #273fdf; | |
border-color: #273fdf; } | |
.main_menu ul li.active a { | |
color: #fff; } | |
ul.pp { | |
display: block; | |
text-align: center; | |
list-style: none; | |
padding: 0; | |
margin: 0; } | |
ul.pp li { | |
display: inline-block; } | |
nav.pp-navigation { | |
display: block; | |
width: 100%; | |
margin-top: 20px; } | |
.pp .page-link { | |
color: #000; | |
border-radius: 4px; | |
font-size: 14px; | |
padding: 8px 20px; | |
margin: 0 5px; } | |
.pp .page-link.active { | |
border-color: #273fdf; | |
background: #273fdf; | |
color: #fff; } | |
.btn { | |
padding: 0px 30px; | |
line-height: 44px; | |
border-radius: 8px; | |
overflow: hidden; | |
cursor: pointer; } | |
.btn.btn-sm { | |
line-height: 32px; } | |
.btn.btn-primary { | |
background-color: #273fdf; | |
border-color: #273fdf; | |
color: #fff; } | |
.btn.btn-primary.hvr-shutter-out-horizontal:hover, .btn.btn-primary.hvr-shutter-out-horizontal:active, .btn.btn-primary.hvr-shutter-out-horizontal:focus { | |
color: #273fdf; | |
box-shadow: none; | |
outline: none; | |
border-color: #273fdf; | |
background: #273fdf; } | |
.btn.btn-primary.hvr-shutter-out-horizontal:before { | |
background: #fff; } | |
.btn.btn-primary.hvr-shutter-out-horizontal:not(:disabled):not(.disabled):active:focus, .btn.btn-primary.hvr-shutter-out-horizontal:not(:disabled):not(.disabled).active:focus { | |
box-shadow: none; } | |
.btn.btn-secondry { | |
background-color: #273fdf; | |
color: #fff; | |
border-color: #273fdf; } | |
.btn.btn-secondry.hvr-shutter-out-horizontal:hover, .btn.btn-secondry.hvr-shutter-out-horizontal:active, .btn.btn-secondry.hvr-shutter-out-horizontal:focus { | |
color: #273fdf; | |
box-shadow: none; } | |
.btn.btn-secondry.hvr-shutter-out-horizontal:before { | |
background: #fff; } | |
.form-control { | |
padding: 0 20px; | |
border-radius: 8px; | |
border: 1px solid #eee; | |
line-height: 44px; | |
font-size: 1.3em; } | |
.form-control:focus { | |
outline: none; | |
box-shadow: none; | |
border-color: #ddd; } | |
.form-control:focus::placeholder { | |
/* Chrome, Firefox, Opera, Safari 10.1+ */ | |
color: #ddd; | |
opacity: 1; | |
/* Firefox */ } | |
.form-control:focus:-ms-input-placeholder { | |
/* Internet Explorer 10-11 */ | |
color: #ddd; } | |
.form-control:focus::-ms-input-placeholder { | |
/* Microsoft Edge */ | |
color: #ddd; } | |
.form-control::placeholder { | |
/* Chrome, Firefox, Opera, Safari 10.1+ */ | |
transition: 200ms; | |
color: #CCCACA; | |
opacity: 1; | |
/* Firefox */ } | |
.form-control:-ms-input-placeholder { | |
/* Internet Explorer 10-11 */ | |
color: #CCCACA; } | |
.form-control::-ms-input-placeholder { | |
/* Microsoft Edge */ | |
color: #CCCACA; } | |
select.form-control { | |
height: 44px !important; } | |
/* Compoments */ | |
.loginPage { | |
direction: ltr; | |
padding: 0; } | |
.loginPage > .row > div:first-child { | |
margin-left: -15px; } | |
.loginPage > .row { | |
margin: 0; } | |
.loginPage span.add-on.input-group-addon { | |
background: transparent; | |
height: 100%; | |
position: absolute; | |
left: 0; | |
top: 0; | |
width: 50px; | |
line-height: 46px; | |
color: #999; | |
outline: none; | |
font-size: 18px; | |
text-align: center; | |
z-index: 10; } | |
.loginPage span.add-on.input-group-addon i { | |
display: inline-block; | |
font: normal normal normal 14px/1 FontAwesome; | |
font-size: inherit; | |
text-rendering: auto; | |
-webkit-font-smoothing: antialiased; | |
-moz-osx-font-smoothing: grayscale; } | |
.loginPage span.add-on.input-group-addon i:before { | |
font: normal normal normal 14px/1 FontAwesome !important; | |
content: "\f06e"; } | |
.loginPage span.add-on.input-group-addon i.glyphicon-eye-close:before { | |
font: normal normal normal 14px/1 FontAwesome !important; | |
content: "\f070"; } | |
.loginPage .form { | |
direction: rtl; } | |
.loginPage .slider { | |
position: relative; } | |
.loginPage .logo { | |
max-width: 180px; | |
margin-top: 4rem; | |
margin-bottom: 3rem; } | |
.loginPage .welcome h1 { | |
font-weight: bold; } | |
.loginPage .welcome h1 span { | |
color: #273fdf; } | |
.loginPage .welcome h4 { | |
line-height: 1.8; | |
font-size: 1.2em; | |
margin-top: 1em; | |
margin-bottom: 1em; | |
color: #8b8c8a; | |
overflow: hidden; } | |
.loginPage .welcome h4 span { | |
color: #000; | |
font-weight: bold; } | |
.loginPage h5 a { | |
height: 30px; | |
line-height: 30px; | |
display: inline-block; } | |
.loginPage .Login-slick { | |
width: 100%; } | |
.loginPage .Login-slick .slick-next { | |
z-index: 1; | |
right: auto; | |
left: 40px; | |
bottom: 25px; | |
top: auto; } | |
.loginPage .Login-slick .slick-prev { | |
z-index: 1; | |
left: 15px; | |
bottom: 25px; | |
top: auto; } | |
.loginPage .Login-slick .slick-prev:before, .loginPage .Login-slick .slick-next:before { | |
color: #fff; } | |
.loginPage .Login-slick.slick-initialized .slick-slide { | |
background: #273fdf; | |
background-image: linear-gradient(36deg, #2771df, #273fdf); | |
height: 100vh; | |
position: relative; } | |
.loginPage .Login-slick.slick-initialized .slick-slide::after { | |
content: ''; | |
display: inline-block; | |
width: 100%; | |
height: 100%; | |
position: absolute; | |
top: 0; | |
left: 0; } | |
.loginPage .Login-slick.slick-initialized .slick-slide h1 { | |
background: transparent; | |
position: absolute; | |
color: #fff; | |
z-index: 2; | |
top: 30%; | |
right: 10%; | |
width: 80%; | |
font-size: 1.6em; | |
line-height: 2em; } | |
.loginPage .Login-slick.slick-initialized .slick-slide img { | |
height: 100%; | |
margin: 0 auto; | |
width: 100%; | |
max-width: 150%; | |
opacity: 0.1; } | |
.loginPage .bottom-links { | |
position: absolute; | |
bottom: 30px; | |
right: 30px; } | |
.loginPage .bottom-links a { | |
color: #fff; } | |
.loginPage .Login-form { | |
padding: 40px 70px; | |
width: 50%; | |
height: 100vh; | |
float: right; } | |
.loginPage .btn { | |
padding: 0px; | |
border-radius: 0; | |
font-size: 2em; | |
height: 60px; } | |
.loginPage .form-group { | |
position: relative; } | |
.loginPage .form-group .alert { | |
position: absolute; | |
background: transparent; | |
border: none; | |
top: 5px; | |
left: 30px; | |
color: #fb959c; } | |
.loginPage .form-control { | |
text-align: right; | |
border-radius: 0; | |
padding: 0 25px; } | |
.loginPage .form-control:focus { | |
border-color: #273fdf; | |
box-shadow: none; } | |
/* Responsive */ | |
/* Custom, iPhone Retina */ | |
@media only screen and (min-width: 320px) { | |
.loginPage { | |
margin-top: -20px; } | |
.loginPage .form { | |
margin: 0 1em; } | |
.loginPage .Login-slick { | |
display: none; } | |
.loginPage .welcome h1 { | |
font-size: 2.5em; } | |
.loginPage .form-group .alert { | |
width: 10px; | |
height: 35px; | |
overflow: hidden; | |
padding: 0 20px; | |
line-height: 35px; } | |
.loginPage .form-group .alert:before { | |
content: "*"; | |
display: block; | |
font-size: 20px; } | |
.loginPage .form-control { | |
font-size: 1.2em; | |
height: 50px; } | |
.loginPage .btn { | |
font-size: 1.5em; | |
height: 50px; } | |
.navbar .nav-pills { | |
padding: 0 10px; | |
margin-top: 20px; } | |
.navbar .nav-pills li { | |
font-size: 1.3em; } | |
.navbar .nav-pills li:nth-child(2) { | |
padding-top: 10px; } } | |
/* Extra Small Devices, Phones */ | |
/* Small Devices, Tablets */ | |
@media only screen and (min-width: 768px) { | |
.container-fluid { | |
width: 100%; } | |
.loginPage { | |
margin: 0; } | |
.loginPage .form { | |
margin: 0 7em; } | |
.loginPage .Login-slick { | |
display: block; } | |
.loginPage .form-group .alert { | |
width: auto; | |
height: 35px; | |
line-height: 36px; } | |
.loginPage .form-group .alert:before { | |
display: none; } | |
.navbar .nav-pills { | |
border: none; | |
margin: 0; } | |
.navbar .nav-pills li { | |
font-size: 1.8em; } } | |
/* Medium Devices, Desktops */ | |
/* Large Devices, Wide Screens */ | |
@media only screen and (min-width: 1200px) { | |
.container-fluid { | |
width: 90%; } } | |
/* X-Large Devices, Wide Screens */ | |
@media only screen and (min-width: 1600px) { | |
.container-fluid { | |
width: 80%; } | |
.loginPage .form { | |
margin: 10em 15em 0 10em; } } | |
@media only screen and (max-width: 768px) { | |
nav.navbar { | |
padding: 10px 0 !important; } | |
.emp-btn, .grb-btn { | |
margin-top: 10px; } | |
.home-items .main-items { | |
margin-right: auto !important; | |
margin-left: auto !important; | |
margin-bottom: 20px !important; | |
max-width: 460px; | |
display: block; } | |
.home-items .nav-link { | |
padding: 10px 0; } | |
.home-items[_ngcontent-c4] .main-items.hvr-glow[_ngcontent-c4] img[_ngcontent-c4] { | |
width: 35px !important; } } | |
@media only screen and (max-width: 480px) { | |
.loaders { | |
line-height: initial; | |
font-size: 1em; } | |
.loader-quart { | |
display: block; | |
margin: 40px auto; } | |
.modal.show .modal-dialog { | |
padding: 20px; } | |
h1.page-title::before { | |
width: 60px; } | |
td .btn { | |
display: block; | |
width: 100%; } | |
td .btn + .btn { | |
margin-top: 10px; } | |
.navbar .nav-pills { | |
padding: 0; } | |
.profile-menu > a { | |
padding: 0 !important; } | |
.main_logo { | |
width: 100px !important; } | |
.profile-menu .lastname { | |
display: none; } | |
.main_menu[_ngcontent-c2] ul[_ngcontent-c2] li[_ngcontent-c2] { | |
margin: 2px 0 !important; } | |
app-main .container-fluid { | |
padding: 0 !important; } | |
.content-home[_ngcontent-c1] { | |
padding: 0 !important; } | |
footer[_ngcontent-c3] { | |
padding-top: 10px !important; } | |
.d-inline-block { | |
padding: 0 !important; | |
text-align: center !important; | |
display: block !important; | |
float: none !important; } | |
.d-inline-block .d-inline-block { | |
display: inline-block !important; } | |
.d-inline-block a { | |
padding: 0 4px !important; } | |
.d-inline-block p { | |
padding: 0 !important; } | |
.home-items { | |
padding: 0 !important; } | |
.home-items > .row { | |
padding: 0 !important; } | |
.registration .logo { | |
float: left; | |
max-width: 120px; | |
margin-bottom: -40px; } | |
.registration .welcome { | |
clear: both; } | |
.registration .welcome h1 { | |
margin-bottom: 20px; | |
font-size: 1.6em; } } | |
app-header .navbar .main_logo { | |
filter: grayscale(100) invert(1) brightness(100); } | |
/*# sourceMappingURL=styles.css.map */ |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment