gg/views/css/style.css
2020-04-22 11:20:22 +01:00

324 lines
4.2 KiB
CSS

* {
margin: 0;
padding: 0;
text-decoration: none;
}
@font-face{
font-family: os;
src: url(../fonts/ops.ttf);
}
@font-face{
font-family: osl;
src: url(../fonts/opsl.ttf);
}
@font-face{
font-family: nunito;
src: url(../fonts/Nunito-Bold.ttf);
}
body {
background: #FFFFFF;
margin-left: auto;
margin-right: auto;
font-family: os;
max-width: 900px;
}
main {
/*padding-bottom: 200px;*/
}
footer {
position: absolute;
left: 0;
right: 0;
background-color: #D8D8D8;
text-align: center;
height: 200px;
font-family: osl;
font-size: 25px;
box-shadow: inset 0px 3px 10px #8A8A8A;
}
footer a {
color: #737373;
}
::placeholder {
color: #aaaaaa;
}
.page {
background-color: white;
}
.navbar {
background-color: white;
height: 55px;
}
.logon-crumbs {
padding-top: 10px;
padding-bottom: 10px;
}
.logon-crumbs input {
/*display: inline-flex;*/
border: 0.5px solid #979797;
float: left;
position: relative;
height: 34px;
width: 160px;
padding-left: 10px;
margin-right: 20px;
/*border: none;*/
font-family: osl;
font-size: 17px;
box-shadow: 0px 2px 3px #A5A5A5;
}
.user-name {
float: left;
position: relative;
font-family: osl;
font-size: 23px;
color: #898989;
}
.logon-crumbs button {
float: left;
position: relative;
border: none;
height: 35px;
width: 35px;
margin-right: 20px;
}
.btn-login {
background-color: #3D10FF;
font-size: 30px;
color: white;
box-shadow: 0px 2px 3px #A5A5A5;
}
.btn-g-login {
background-color: #cacaca;
border-radius: 5px;
}
.img-g-login {
height: 35px;
width: 35px;
}
.btn-login:hover {
color: red;
transition: 0.3s;
cursor: pointer;
}
.btn-g-login:hover {
box-shadow: 0px 2px 3px #A5A5A5;
transition: 0.3s;
cursor: pointer;
}
.btn-fb-login {
transition: 0.3s;
cursor: pointer;
background-color: white;
border-radius: 20px;
}
.btn-fb-login:hover {
box-shadow: 0px 2px 3px #A5A5A5;
transition: 0.3s;
cursor: pointer;
}
.btn-fb-login:active {
box-shadow: 0px 2px 3px red;
transition: 0.1s;
}
.btn-login:active {
color: white;
transition: 0.1s;
}
.btn-g-login:active {
box-shadow: 0px 2px 3px red;
transition: 0.1s;
}
.user-info {
float: right;
position: relative;
display: inline-flex;
bottom: 10%;
font-family: osl
}
.add-item a {
color: #ff6619;
font-family: osl;
font-size: 30px;
padding-left: 10px;
position: relative;
bottom: 23%;
}
.add-item a:hover {
color: #c41000;
transition: 0.3s;
}
.add-item a:active {
color: #BBBBBB;
transition: 0.1s;
}
.notifications {
padding-right: 15px;
color: #898989;
}
.cart {
color: #898989;
}
.sbar {
height: 55px;
padding-top: 10px;
padding-bottom: 10px;
}
.sbar img {
position: relative;
height: 35px;
float: left;
padding-left: 7%;
padding-right: 20px;
/*left: 5%;*/
}
.sbar input {
border: 0.5px solid black;
display: inline-flex;
position: relative;
float: left;
height: 34px;
width: 400px;
padding-left: 10px;
font-family: osl;
font-size: 17px;
box-shadow: 0px 3px 4px #A5A5A5;
/*position: absolute;
left: 50%;
transform: translate(-50%, 0);*/
}
.sbar button {
position: relative;
float: left;
background-color: #5359FF;
border: none;
box-shadow: 0px 2px 3px #A5A5A5;
color: #C4C4C4;
height: 35px;
width: 100px;
margin-left: 20px;
font-size: 20px;
font-family: osl;
}
.sbar a {
position: relative;
float: left;
color: #7F7F7F;
font-family: osl;
font-size: 14px;
margin-left: 15px;
top: 15%;
}
.space {
height: 15px;
}
.welcome img {
width: 100%;
}
.products p {
font-family: osl;
font-size: 25px;
color: #7C7C7C;
margin-bottom: 10px;
margin-top: 10px;
}
.product-container {
width: 160px;
}
.product-container img {
width: 100%;
}
.product-container p {
font-family: nunito;
color: #CA5555;
font-size: 17px;
}
.r {float: right;}
.l {float: left;}
.links {
padding-top: 40px;
}
.links a {
margin: 20px;
}
.legal {
padding: 10px;
}
.legal a{
font-size: 19px;
}
.link {
text-decoration: underline;
}
.location {
float: right;
margin-right: 10%;
margin-top: 5px;
font-size: 19px;
color: #737373;
}
.user-logout {
float: left;
padding-left: 10px;
padding-top: 11px;
position: relative;
font-family: osl;
font-size: 13px;
color: #393939;
cursor: pointer;
}
.user-logout:hover {
color: red;
transition: 0.3s;
}