183 lines
3.5 KiB
CSS
183 lines
3.5 KiB
CSS
/* Colors */
|
|
.logo { font-weight: 500 !important;}
|
|
.text-warning { color: #ede861 !important;}
|
|
.text-muted { color: #bcbcbc !important;}
|
|
.text-success { color: #d86f23 !important;}
|
|
.text-light { color: #cfd6e1 !important;}
|
|
.bg-dark { background-color: #212934 !important;}
|
|
.bg-light { background-color: #e9eef5 !important;}
|
|
.bg-black { background-color: #1d242d !important;}
|
|
.bg-success { background-color: #d86f23!important;}
|
|
.btn-success {
|
|
background-color: #d86f23 !important;
|
|
border-color: #ba5c19 !important;
|
|
}
|
|
.table-success {
|
|
background-color: #d86f23 !important;
|
|
}
|
|
|
|
/* Navbar */
|
|
#top_nav_bar { min-height: 40px;}
|
|
#top_nav_bar * { font-size: .9em !important;}
|
|
#marmeladenladen_main_nav a{
|
|
color: #212934;
|
|
}
|
|
#marmeladenladen_main_nav a:hover{
|
|
color: #d86f23;
|
|
}
|
|
#marmeladenladen_main_nav .navbar .nav-icon { margin-right: 20px;}
|
|
|
|
/* Footer */
|
|
#marmeladenladen_footer a { color: #dcdde1;}
|
|
#marmeladenladen_footer a:hover { color: #d86f23;}
|
|
#marmeladenladen_footer ul.footer-link-list li { padding-top: 10px;}
|
|
#marmeladenladen_footer ul.footer-icons li {
|
|
width: 2.6em;
|
|
height: 2.6em;
|
|
line-height: 2.6em;
|
|
}
|
|
#marmeladenladen_footer ul.footer-icons li:hover {
|
|
background-color: #cfd6e1;
|
|
transition: .5s;
|
|
}
|
|
#marmeladenladen_footer ul.footer-icons li:hover i {
|
|
color: #212934;
|
|
transition: .5s;
|
|
}
|
|
#marmeladenladen_footer .border-light { border-color: #2d343f !important;}
|
|
|
|
/* Carousel*/
|
|
#marmeladenLadencarousel .carousel-indicators li {
|
|
margin-top: -50px;
|
|
background-color: #d86f23;
|
|
}
|
|
#marmeladenLadencarousel .carousel-control-next i,
|
|
#marmeladenLadencarousel .carousel-control-prev i {
|
|
color: #d86f23 !important;
|
|
font-size: 2.8em !important;
|
|
}
|
|
|
|
/* MainContent */
|
|
.maincontent {
|
|
padding-top: 5em;
|
|
padding-bottom: 5em;
|
|
}
|
|
|
|
/* Medium devices */
|
|
@media (min-width: 768px) {
|
|
#main_nav_bar .navbar-nav {max-width: 450px;}
|
|
}
|
|
|
|
/* large devices */
|
|
@media (min-width: 992px) {
|
|
#main_nav_bar .navbar-nav {max-width: 550px;}
|
|
}
|
|
|
|
/* larger devices */
|
|
@media (min-width: 1200px) {}
|
|
|
|
/* input fields registration */
|
|
.registerform .form-control {
|
|
border-radius: 0px;
|
|
border: 1px solid #cfd6e1;
|
|
background-color: #e9eef5;
|
|
color: #212934;
|
|
font-size: .9em;
|
|
padding: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.registerform .form-control:read-only {
|
|
background-color: #f07f7f;
|
|
}
|
|
|
|
|
|
/* shop page */
|
|
.shoppingpage {
|
|
background: #eee;
|
|
}
|
|
.card{
|
|
border:1px solid #eee;
|
|
cursor: pointer;
|
|
}
|
|
.weight{
|
|
margin-top: -65px;
|
|
transition: all 0.5s;
|
|
}
|
|
.weight small{
|
|
color: #e2dede;
|
|
}
|
|
.id small{
|
|
color: white;
|
|
}
|
|
.shopbutton {
|
|
padding: 10px;
|
|
background-color: #d6d4d44f;
|
|
border-radius: 4px;
|
|
position: relative;
|
|
margin-top: 7px;
|
|
opacity: 0;
|
|
transition: all 0.8s;
|
|
}
|
|
.cart-button {
|
|
height: 48px
|
|
}
|
|
.cart-button:focus {
|
|
box-shadow: none
|
|
}
|
|
.cart {
|
|
position: relative;
|
|
height: 48px !important;
|
|
width: 50px;
|
|
margin-right: 8px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-color: #fff;
|
|
padding: 11px;
|
|
border-radius: 5px;
|
|
font-size: 14px;
|
|
transition: 1s ease-in-out;
|
|
overflow: hidden;
|
|
}
|
|
.cart-button.clicked span.dot {
|
|
animation: item 0.3s ease-in forwards
|
|
}
|
|
@keyframes item {
|
|
0% {
|
|
opacity: 1;
|
|
top: 30%;
|
|
left: 30%
|
|
}
|
|
25% {
|
|
opacity: 1;
|
|
left: 26%;
|
|
top: 0%
|
|
}
|
|
50% {
|
|
opacity: 1;
|
|
left: 23%;
|
|
top: -22%
|
|
}
|
|
75% {
|
|
opacity: 1;
|
|
left: 19%;
|
|
top: -18%
|
|
}
|
|
100% {
|
|
opacity: 1;
|
|
left: 14%;
|
|
top: 28%
|
|
}
|
|
}
|
|
.card:hover .buttons{
|
|
opacity: 1;
|
|
}
|
|
.card:hover .weight{
|
|
margin-top: 10px;
|
|
}
|
|
.card:hover{
|
|
transform: scale(1.04);
|
|
z-index: 2;
|
|
overflow: hidden;
|
|
} |