802 lines
11 KiB
CSS
802 lines
11 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 {
|
|
min-height: 79.7vh;
|
|
/*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;
|
|
font-family: osl;
|
|
}
|
|
|
|
input:focus, textarea:focus, select:focus{
|
|
outline: none;
|
|
}
|
|
|
|
.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;
|
|
cursor: pointer;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.user-name:hover {
|
|
color: red;
|
|
}
|
|
.user-name:active {
|
|
transition: 0.1s;
|
|
color: #F0F0F0;
|
|
}
|
|
|
|
|
|
.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;
|
|
transition: 0.3s;
|
|
}
|
|
.notifications:hover {
|
|
color: tomato;
|
|
}
|
|
.notifications:active {
|
|
transition: 0.1s;
|
|
color: cyan;
|
|
}
|
|
|
|
.cart {
|
|
color: #898989;
|
|
transition: 0.3s;
|
|
}
|
|
.cart:hover {
|
|
color: tomato;
|
|
}
|
|
.cart:active {
|
|
transition: 0.1s;
|
|
color: cyan;
|
|
}
|
|
|
|
.sbar {
|
|
height: 55px;
|
|
padding-top: 10px;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.sbar img {
|
|
position: relative;
|
|
height: 35px;
|
|
float: left;
|
|
padding-left: 7%;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
/*left: 5%;*/
|
|
}
|
|
|
|
.sbar input {
|
|
border: 0.5px solid gray;
|
|
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;
|
|
transition: 0.4s;
|
|
}
|
|
|
|
.sbar button:hover {
|
|
background-color: violet;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.sbar button:active {
|
|
background-color: whitesmoke;
|
|
transition: 0.2s;
|
|
}
|
|
|
|
.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-list-container {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
width: 100%;
|
|
padding-bottom: 40px;
|
|
}
|
|
|
|
.product-container {
|
|
width: 160px;
|
|
height: 160px;
|
|
}
|
|
|
|
.product-container img {
|
|
width: 100%;
|
|
max-height: 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;
|
|
}
|
|
|
|
.user-auth-message {
|
|
position: relative;
|
|
width: 100%;
|
|
text-align: center;
|
|
}
|
|
|
|
.user-auth-message p {
|
|
color: red;
|
|
font-size: 30px;
|
|
|
|
}
|
|
|
|
.new-product-field {
|
|
position: relative;
|
|
width: 100%;
|
|
}
|
|
|
|
.new-product-field p {
|
|
font-size: 25px;
|
|
color: #898989;
|
|
padding-bottom: 20px;
|
|
}
|
|
|
|
.new-product-field label {
|
|
font-size: 20px;
|
|
color: #898989;
|
|
display: inline-block;
|
|
}
|
|
|
|
.new-product-field input {
|
|
height: 40px;
|
|
width: 300px;
|
|
display: block;
|
|
font-size: 15px;
|
|
padding-left: 10px;
|
|
margin-bottom: 15px;
|
|
border-radius: 0;
|
|
border: 0.5px solid grey;
|
|
}
|
|
|
|
#pImg {
|
|
position: relative;
|
|
border: none;
|
|
color: grey;
|
|
left: -10px;
|
|
top: 12px;
|
|
}
|
|
|
|
.new-product-field button {
|
|
height: 40px;
|
|
width: 120px;
|
|
display: block;
|
|
font-size: 19px;
|
|
font-family: osl;
|
|
box-shadow: 0px 2px 3px #A5A5A5;
|
|
margin-bottom: 15px;
|
|
border-radius: 0;
|
|
border: none;
|
|
background-color: #30a8ff;
|
|
transition: 0.3s;
|
|
}
|
|
|
|
.new-product-field button:hover {
|
|
transition: 0.3s;
|
|
background-color: #ff7700;
|
|
}
|
|
|
|
.new-product-field button:active {
|
|
transition: 0.1s;
|
|
background-color: #ffaf69;
|
|
}
|
|
|
|
.new-product-field button:disabled {
|
|
background-color: #b9b9b9;
|
|
}
|
|
|
|
.npf-long input {
|
|
width: 600px;
|
|
}
|
|
|
|
.npf-short input {
|
|
width: 150px;
|
|
}
|
|
|
|
.user-message {
|
|
width: 100%;
|
|
}
|
|
|
|
.user-message p {
|
|
position: relative;
|
|
font-family: osl;
|
|
font-size: 20px;
|
|
color: green;
|
|
left: 50%;
|
|
transform: translate(-10%, 0);
|
|
}
|
|
|
|
.product-page-container {
|
|
width: 100%;
|
|
display: block;
|
|
}
|
|
.product-page-info-container {
|
|
position: relative;
|
|
width: 100%;
|
|
font-family: osl;
|
|
color: #5E5E5E;
|
|
display: inline-flex;
|
|
}
|
|
.product-page-img {
|
|
position: relative;
|
|
width: 42%;
|
|
padding-top: 5px;
|
|
}
|
|
.product-page-img img {
|
|
width: 100%;
|
|
}
|
|
.product-page-info {
|
|
position: relative;
|
|
padding-left: 20px;
|
|
display: block;
|
|
}
|
|
|
|
.product-page-info button {
|
|
margin-top: 38px;
|
|
height: 40px;
|
|
width: 100px;
|
|
display: block;
|
|
font-size: 19px;
|
|
font-family: osl;
|
|
box-shadow: 0px 2px 3px #A5A5A5;
|
|
border-radius: 0;
|
|
border: none;
|
|
background-color: #30a8ff;
|
|
transition: 0.3s;
|
|
}
|
|
.product-page-info button:hover {
|
|
transition: 0.3s;
|
|
background-color: #ffc04b;
|
|
}
|
|
.product-page-info button:active {
|
|
transition: 0.1s;
|
|
background-color: #ffaf69;
|
|
}
|
|
.product-page-info button:disabled {
|
|
background-color: #b9b9b9;
|
|
}
|
|
.product-page-info h2 {
|
|
font-size: 30px;
|
|
}
|
|
.product-page-info p {
|
|
font-size: 20px;
|
|
padding-top: 38px;
|
|
}
|
|
|
|
.product-page-info input {
|
|
margin-top: 20px;
|
|
height: 40px;
|
|
width: 500px;
|
|
font-size: 15px;
|
|
padding-left: 10px;
|
|
margin-bottom: -10px;
|
|
font-family: osl;
|
|
border-radius: 0;
|
|
border: 0.5px solid grey;
|
|
}
|
|
|
|
.product-page-description {
|
|
margin-top: 10px;
|
|
}
|
|
.product-page-description p {
|
|
font-family: osl;
|
|
font-size: 20px;
|
|
color: #5E5E5E;
|
|
}
|
|
|
|
.my-products-container {
|
|
color: transparent;
|
|
}
|
|
|
|
.my-product-container {
|
|
padding-top: 15px;
|
|
width: 100%;
|
|
height: 160px;
|
|
display: inline-flex;
|
|
}
|
|
|
|
|
|
.my-product-container img {
|
|
width: 20%;
|
|
max-height: 90%;
|
|
cursor: pointer;
|
|
}
|
|
.my-product-details-container {
|
|
display: block;
|
|
line-height: 0;
|
|
padding-left: 10px;
|
|
width: 100%;
|
|
}
|
|
.my-product-details-container p {
|
|
font-family: nunito;
|
|
color: #CA5555;
|
|
font-size: 25px;
|
|
width: 100%;
|
|
}
|
|
.top {
|
|
padding-top: 5px;
|
|
}
|
|
.middle-top {
|
|
padding-top: 30px;
|
|
}
|
|
.middle-bottom {
|
|
padding-top: 30px;
|
|
}
|
|
.bottom {
|
|
padding-top: 30px;
|
|
}
|
|
|
|
.purchase-message {
|
|
color: #00df90;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
font-family: osl;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.error-message {
|
|
color: #df0000;
|
|
text-align: center;
|
|
font-size: 25px;
|
|
font-family: osl;
|
|
padding-bottom: 10px;
|
|
}
|
|
|
|
.product-mgmt-buttons {
|
|
display: inline-flex;
|
|
}
|
|
.product-mgmt-buttons button {
|
|
margin-top: 38px;
|
|
height: 40px;
|
|
width: 150px;
|
|
display: block;
|
|
font-size: 19px;
|
|
font-family: osl;
|
|
box-shadow: 0px 2px 3px #A5A5A5;
|
|
border-radius: 0;
|
|
border: none;
|
|
transition: 0.3s;
|
|
margin-right: 15px;
|
|
}
|
|
.product-mgmt-buttons button:hover {
|
|
transition: 0.3s;
|
|
}
|
|
.product-mgmt-buttons button:active {
|
|
transition: 0.1s;
|
|
}
|
|
.edit-btn button {
|
|
background-color: #A562FF;
|
|
}
|
|
.sell-btn button {
|
|
background-color: #0FDD00;
|
|
}
|
|
.ship-btn button {
|
|
background-color: #CB0070;
|
|
}
|
|
.edit-btn button:hover {
|
|
background-color: #ea62ff;
|
|
}
|
|
.sell-btn button:hover {
|
|
background-color: #AAFF00;
|
|
}
|
|
.ship-btn button:hover {
|
|
background-color: cyan;
|
|
}
|
|
.edit-btn button:active {
|
|
background-color: pink;
|
|
}
|
|
.sell-btn button:active {
|
|
background-color: #00FF00;
|
|
}
|
|
.ship-btn button:active {
|
|
background-color: #00CCEE;
|
|
}
|
|
|
|
.e404 {
|
|
width: 100%;
|
|
}
|
|
|
|
.e404 svg {
|
|
width: 100%;
|
|
}
|
|
|
|
.ship-adress {
|
|
height: 50px;
|
|
width: 100%;
|
|
}
|
|
|
|
.ship-adress button {
|
|
position: relative;
|
|
border: 0;
|
|
height: 40px;
|
|
width: 350px;
|
|
background-color: salmon;
|
|
font-family: osl;
|
|
font-size: 20px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
transition: 0.3s;
|
|
color: white;
|
|
box-shadow: 0px 2px 3px #A5A5A5;
|
|
}
|
|
.ship-adress button:hover {
|
|
background-color: pink;
|
|
color: black;
|
|
}
|
|
.ship-adress button:active {
|
|
transition: 0.1s;
|
|
background-color: white;
|
|
}
|
|
.ship-adress input {
|
|
position: relative;
|
|
border: 0;
|
|
height: 40px;
|
|
width: 600px;
|
|
background-color: #EEEEEE;
|
|
font-family: osl;
|
|
font-size: 20px;
|
|
left: 50%;
|
|
transform: translate(-50%, 0);
|
|
color: black;
|
|
box-shadow: 0px 2px 3px #A5A5A5;
|
|
padding-left: 10px;
|
|
}
|
|
|
|
.big-box {
|
|
height: 35px;
|
|
background-color: #d8d8d8d8;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
}
|
|
|
|
.sub-page {
|
|
width: 85%;
|
|
margin: 10px auto;
|
|
}
|
|
|
|
.small-box {
|
|
height: 35px;
|
|
background-color: #d8d8d8d8;
|
|
}
|
|
|
|
.u-r-title {
|
|
font-family: osl;
|
|
font-size: 32px;
|
|
text-align: center;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
.u-r-cols {
|
|
display: inline-flex;
|
|
}
|
|
|
|
.u-r-left {
|
|
width: 50%;
|
|
}
|
|
.u-r-subtitle{
|
|
font-family: osl;
|
|
font-size: 25px;
|
|
margin-top: 10px;
|
|
margin-bottom: 20px;
|
|
}
|
|
.u-r-left input{
|
|
height: 40px;
|
|
display: block;
|
|
font-size: 15px;
|
|
width: 250px;
|
|
padding-left: 10px;
|
|
margin: 15px 0;
|
|
border-radius: 0;
|
|
border: 0.5px solid grey;
|
|
}
|
|
.u-r-left .u-r-i-location input {
|
|
width: 100% !important;
|
|
}
|
|
|
|
.u-r-right {
|
|
float: right;
|
|
width: 50%;
|
|
text-align: end;
|
|
}
|
|
.u-r-right img{
|
|
width: 57%;
|
|
}
|
|
.u-r-right .u-r-subtitle{
|
|
font-family: osl;
|
|
font-size: 25px;
|
|
margin-top: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.u-r-btn button {
|
|
width: 120px;
|
|
height: 40px;
|
|
border: 0;
|
|
display: block;
|
|
font-size: 19px;
|
|
font-family: osl;
|
|
box-shadow: 0px 2px 3px #A5A5A5;
|
|
border-radius: 0;
|
|
transition: 0.3s;
|
|
margin: 10px auto;
|
|
background-color: #A2FF9B;
|
|
color: #727272;
|
|
}
|
|
|
|
.u-r-btn button:hover {
|
|
background-color: rgb(0, 255, 221);
|
|
}
|
|
|
|
.u-r-btn button:active {
|
|
background-color: #11FF00;
|
|
color: white;
|
|
transition: 0.1s;
|
|
} |