|
|
@@ -7,32 +7,275 @@
|
|
|
body {
|
|
|
margin: 0;
|
|
|
height: 100vh;
|
|
|
- background-color: darkgrey;
|
|
|
padding: 10px;
|
|
|
|
|
|
}
|
|
|
|
|
|
-#svetofor, #padestrianSvetofor, #padestrianSvetoforButton{
|
|
|
- width: 100px;
|
|
|
- height: 100px;
|
|
|
- border-radius: 50%;
|
|
|
- margin: 20px;
|
|
|
- border: 2px solid black;
|
|
|
+
|
|
|
+main {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+aside {
|
|
|
+ margin-top: 22px;
|
|
|
+ padding-right: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+aside a {
|
|
|
+ text-decoration: none;
|
|
|
+ color: white;
|
|
|
+ background-color: rgb(170, 170, 170);
|
|
|
+ margin-bottom: 5px;
|
|
|
+ padding: 5px;
|
|
|
+ transition: .2s;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+aside a:hover {
|
|
|
+ background-color: rgb(133, 133, 133);
|
|
|
+}
|
|
|
+
|
|
|
+h1 {
|
|
|
+ width: 100%;
|
|
|
+ margin: 10px;
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.card {
|
|
|
+ display: block;
|
|
|
+ width: calc(25% - 20px);
|
|
|
+ margin: 10px;
|
|
|
+ border: 1px solid grey;
|
|
|
+ padding: 10px;
|
|
|
+ text-align: center;
|
|
|
+ text-decoration: none;
|
|
|
+ color: dimgray;
|
|
|
+ transition: .2s;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+
|
|
|
+.card:hover{
|
|
|
+box-shadow: 0px 0px 5px rgba(9, 110, 24, 0.5)
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+.cardImgWrapper{
|
|
|
+ height: 200px;
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
- color: green;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.cardImg {
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+ max-height: 100%;
|
|
|
+ object-position: 50% 50%;
|
|
|
+ object-fit: contain;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.cardName {
|
|
|
+ max-width: 100%;
|
|
|
+ font-size: 1em;
|
|
|
+ text-decoration: none;
|
|
|
+}
|
|
|
+
|
|
|
+.cardPrice {
|
|
|
+ min-width: 80px;
|
|
|
+ padding: 5px;
|
|
|
+ color: white;
|
|
|
+ background-color: rgba(0, 133, 0, 0.85);
|
|
|
+ position: absolute;
|
|
|
+ right: -10px;
|
|
|
+ top: 40px;
|
|
|
+}
|
|
|
+
|
|
|
+.imgSlider {
|
|
|
+ width: calc(50% - 20px);
|
|
|
+ padding: 10px
|
|
|
+}
|
|
|
+
|
|
|
+.sliderImg {
|
|
|
+ display: block;
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.asideDesriptionPriceCard {
|
|
|
+ width: calc(50% - 20px);
|
|
|
+ padding: 10px
|
|
|
+}
|
|
|
+
|
|
|
+.goodPrice {
|
|
|
+ color:rgb(38,151,38);
|
|
|
+ font-weight: bolder;
|
|
|
+ font-size: 1.5em;
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.goodCountInput{
|
|
|
+ padding: 5px;
|
|
|
+ color: rgb(38,151,38);
|
|
|
+ width: 150px;
|
|
|
+ font-weight: bolder;
|
|
|
+ margin: 10px 20px 20px 0;
|
|
|
+ border-radius: 0;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.goodButtonAddToCart {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 6px 10px;
|
|
|
+ color: white;
|
|
|
+ background-color: rgb(38,151,38);
|
|
|
+ width: 150px;
|
|
|
font-weight: bolder;
|
|
|
+ margin: 10px 20px 20px 0;
|
|
|
+ transition: .2s;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+
|
|
|
+}
|
|
|
+
|
|
|
+.goodButtonAddToCart:hover {
|
|
|
+ background-color: rgb(215, 155, 14);
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+
|
|
|
+.description {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-top: 20px;
|
|
|
+ font-size: 1.2em;
|
|
|
+}
|
|
|
+
|
|
|
+.iconwrapper {
|
|
|
+ display: block;
|
|
|
+ width: 50px;
|
|
|
+ padding: 5px;
|
|
|
+ position: relative;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.iconwrapper img {
|
|
|
+ max-width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+#cartIcon {
|
|
|
+ position: absolute;
|
|
|
+ bottom: 13px;
|
|
|
+ right: -10px;
|
|
|
+ background-color: rgb(38,151,38);
|
|
|
+ border-radius: 3px;
|
|
|
+ padding: 2px;
|
|
|
+}
|
|
|
+/* .table_price{} */
|
|
|
+
|
|
|
+.table_price {
|
|
|
+ border-collapse: collapse;
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.tdSumm{
|
|
|
+ color: rgb(38,151,38);
|
|
|
+ font-size: 1.5rem;
|
|
|
+}
|
|
|
+
|
|
|
+.table_price td, .table_price th {
|
|
|
+ padding: 10px;
|
|
|
+}
|
|
|
+.table_price th {
|
|
|
+ text-align: left;
|
|
|
+ font-size: 18px;
|
|
|
+}
|
|
|
+.table_price tr:nth-child(2n) {
|
|
|
+ background: #E5E5E5;
|
|
|
+}
|
|
|
+.table_price td:last-of-type {
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+.table_price a {
|
|
|
+ display: inline-block;
|
|
|
+ padding: 5px 10px;
|
|
|
+ background: #F79361;
|
|
|
+ box-shadow: 2px 2px 0 0 #a22800;
|
|
|
+ position: relative;
|
|
|
+}
|
|
|
+.table_price a:hover {
|
|
|
+ box-shadow: none;
|
|
|
+ top: 2px;
|
|
|
+ left: 2px;
|
|
|
+}
|
|
|
+
|
|
|
+.addOrder {
|
|
|
+ padding: 5px 10px;
|
|
|
+ background-color: #F79361;
|
|
|
+ color: white;
|
|
|
+ cursor: pointer;
|
|
|
+ display: block;
|
|
|
+ margin-top: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.containerSubcategoryLink {
|
|
|
+ width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.subcategoryLink {
|
|
|
+ display: inline-block;
|
|
|
+ text-decoration: none;
|
|
|
+ background-color: rgb(170, 170, 170);
|
|
|
+ color: white;
|
|
|
+ padding: 2px 5px;
|
|
|
+ margin: 10px 3px;
|
|
|
+ transition: .3s;
|
|
|
+}
|
|
|
+.subcategoryLink:hover{
|
|
|
+ background-color: rgb(133, 133, 133);
|
|
|
+}
|
|
|
+
|
|
|
+.subcategoryLink:first-child {
|
|
|
+ margin-left: 10px;
|
|
|
+}
|
|
|
+
|
|
|
+.breadcrumbsContainer {
|
|
|
+width: 100%;
|
|
|
+}
|
|
|
+
|
|
|
+.breadcrumbsContainer >* {
|
|
|
+ display: inline-block;
|
|
|
+ margin: 10px 3px;
|
|
|
+ color: black;
|
|
|
+}
|
|
|
+
|
|
|
+.breadcrumbsContainer > div {
|
|
|
+ color: rgb(189, 189, 189);
|
|
|
+ font-weight: bolder;
|
|
|
+}
|
|
|
+
|
|
|
+.breadcrumbsContainer >a:hover {
|
|
|
+ color: rgb(38,151,38);
|
|
|
}
|
|
|
|
|
|
-.svetoforRed {
|
|
|
- background-color: red;
|
|
|
+#user {
|
|
|
+ color: white;
|
|
|
+ font-weight: bold;
|
|
|
}
|
|
|
|
|
|
-.svetoforYellow {
|
|
|
- background-color: yellow;
|
|
|
+#user > button {
|
|
|
+ margin: 5px;
|
|
|
+ background-color: rgb(247,147,97);
|
|
|
+ color: white;
|
|
|
+ transition: .3s;
|
|
|
+ border: 0;
|
|
|
+ padding: 3px 5px;
|
|
|
}
|
|
|
|
|
|
-.svetoforGreen {
|
|
|
- background-color: green;
|
|
|
+#user > button:hover {
|
|
|
+ background-color: rgb(246, 120, 57);
|
|
|
}
|
