help me lord
This commit is contained in:
parent
b6c8c6f5d6
commit
b3d93010d6
8 changed files with 650 additions and 598 deletions
Binary file not shown.
|
|
@ -2,495 +2,504 @@
|
|||
|
||||
/* Main GridPane */
|
||||
#main {
|
||||
-fx-padding: 20;
|
||||
-fx-hgap: 20;
|
||||
-fx-vgap: 20;
|
||||
-fx-background-image: url('images/background');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-position: center center;
|
||||
-fx-background-blend-mode: overlay;
|
||||
-fx-padding: 20;
|
||||
-fx-hgap: 20;
|
||||
-fx-vgap: 20;
|
||||
-fx-background-image: url("images/background");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-position: center center;
|
||||
-fx-background-blend-mode: overlay;
|
||||
}
|
||||
|
||||
/* Header */
|
||||
.header {
|
||||
-fx-background-color: #6a1b9a;
|
||||
-fx-padding: 20px 30px;
|
||||
-fx-border-color: #8e44ad;
|
||||
-fx-border-width: 0 0 2px 0;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
-fx-background-color: #6a1b9a;
|
||||
-fx-padding: 20px 30px;
|
||||
-fx-border-color: #8e44ad;
|
||||
-fx-border-width: 0 0 2px 0;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
-fx-font-size: 26px;
|
||||
-fx-font-weight: 700;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-padding: 0 20;
|
||||
-fx-alignment: center;
|
||||
-fx-letter-spacing: 1px;
|
||||
-fx-font-size: 26px;
|
||||
-fx-font-weight: 700;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-padding: 0 20;
|
||||
-fx-alignment: center;
|
||||
-fx-letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* Footer */
|
||||
.footer {
|
||||
-fx-background-color: #6a1b9a;
|
||||
-fx-padding: 25px;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
|
||||
-fx-background-color: #6a1b9a;
|
||||
-fx-padding: 25px;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footerHeading {
|
||||
-fx-font-weight: bold;
|
||||
-fx-font-size: 18px;
|
||||
-fx-padding-bottom: 5px;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-font-weight: bold;
|
||||
-fx-font-size: 18px;
|
||||
-fx-padding-bottom: 5px;
|
||||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
.footerText,
|
||||
.footerLink,
|
||||
.footerCopy {
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
.footerLink {
|
||||
-fx-font-size: 14px;
|
||||
-fx-padding: 5px 0;
|
||||
-fx-font-size: 14px;
|
||||
-fx-padding: 5px 0;
|
||||
}
|
||||
|
||||
.footerLink:hover {
|
||||
-fx-text-fill: #8e44ad;
|
||||
-fx-text-fill: #8e44ad;
|
||||
}
|
||||
|
||||
.footerCopy {
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 5px;
|
||||
-fx-alignment: center;
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 5px;
|
||||
-fx-alignment: center;
|
||||
}
|
||||
|
||||
/* Individual Cards */
|
||||
.cardDiv {
|
||||
-fx-background-color: rgba(156, 89, 182, 0.7);
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-border-radius: 12px;
|
||||
-fx-background-radius: 12px;
|
||||
-fx-padding: 15;
|
||||
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 10, 0.5, 0, 5);
|
||||
-fx-alignment: top-center;
|
||||
-fx-background-size: cover;
|
||||
-fx-background-position: center center;
|
||||
-fx-pref-width: 250;
|
||||
-fx-pref-height: 230;
|
||||
-fx-min-width: 250;
|
||||
-fx-min-height: 230;
|
||||
-fx-background-color: rgba(156, 89, 182, 0.7);
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-border-radius: 12px;
|
||||
-fx-background-radius: 12px;
|
||||
-fx-padding: 15;
|
||||
-fx-effect: dropshadow(gaussian, rgba(0, 0, 0, 0.1), 10, 0.5, 0, 5);
|
||||
-fx-alignment: top-center;
|
||||
-fx-background-size: cover;
|
||||
-fx-background-position: center center;
|
||||
-fx-pref-width: 250;
|
||||
-fx-pref-height: 230;
|
||||
-fx-min-width: 250;
|
||||
-fx-min-height: 230;
|
||||
}
|
||||
|
||||
|
||||
.cardTitel {
|
||||
-fx-font-size: 18px;
|
||||
-fx-font-weight: 600;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-padding: 5 0 15 0;
|
||||
-fx-alignment: center;
|
||||
-fx-font-size: 18px;
|
||||
-fx-font-weight: 600;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-padding: 5 0 15 0;
|
||||
-fx-alignment: center;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
-fx-text-fill: #000;
|
||||
-fx-margin: 10px auto;
|
||||
-fx-text-fill: #000;
|
||||
-fx-margin: 10px auto;
|
||||
}
|
||||
|
||||
#cardDiv1 {
|
||||
-fx-background-image: url('images/lotr.jpg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/lotr.jpg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
#cardDiv2 {
|
||||
-fx-background-image: url('images/wheel.jpg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/wheel.jpg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
#cardDiv3 {
|
||||
-fx-background-image: url('images/narnia.jpg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/narnia.jpg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
#cardDiv4 {
|
||||
-fx-background-image: url('images/earthsea.jpg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/earthsea.jpg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
#cardDiv5 {
|
||||
-fx-background-image: url('images/theFirstLaw.jpg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/theFirstLaw.jpg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
#cardDiv6 {
|
||||
-fx-background-image: url('images/kingkiller.jpeg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/kingkiller.jpeg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
#cardDiv7 {
|
||||
-fx-background-image: url('images/mistborn.jpg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/mistborn.jpg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
#cardDiv8 {
|
||||
-fx-background-image: url('images/stormlight.jpg');
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-background-image: url("images/stormlight.jpg");
|
||||
-fx-background-size: cover;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
}
|
||||
|
||||
/* Buttons */
|
||||
|
||||
/* Card Button */
|
||||
.cardBtn {
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 16px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 16px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cardBtn:hover {
|
||||
-fx-background-color: #732d91;
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
/* Header Buttons */
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 16px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 16px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cartBtn:hover,
|
||||
.loginBtn:hover {
|
||||
-fx-background-color: #732d91;
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
.btnCreateAccount,
|
||||
.btnLogin,
|
||||
.btnCheckOut {
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 20px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 20px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btnCreateAccount:hover,
|
||||
.btnLogin:hover,
|
||||
.btnCheckOut:hover {
|
||||
-fx-background-color: #732d91;
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
/* Specific Button - Checkout */
|
||||
#btnCheckOut {
|
||||
-fx-font-size: 16px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 10px 20px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
-fx-font-size: 16px;
|
||||
-fx-background-color: #8e44ad;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-background-radius: 20px;
|
||||
-fx-padding: 10px 20px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
#btnCheckOut:hover {
|
||||
-fx-background-color: #732d91;
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
/* Forms */
|
||||
.formTitle,
|
||||
.cartTitle {
|
||||
-fx-font-size: 26px;
|
||||
-fx-font-weight: 700;
|
||||
-fx-text-fill: #6a1b9a;
|
||||
-fx-alignment: center;
|
||||
-fx-padding: 10 0 20 0;
|
||||
-fx-font-size: 26px;
|
||||
-fx-font-weight: 700;
|
||||
-fx-text-fill: #6a1b9a;
|
||||
-fx-alignment: center;
|
||||
-fx-padding: 10 0 20 0;
|
||||
}
|
||||
|
||||
.cartTitle {
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
.formFields {
|
||||
-fx-margin: 5 0 0 0;
|
||||
-fx-padding: 5 0 0 0;
|
||||
-fx-margin: 5 0 0 0;
|
||||
-fx-padding: 5 0 0 0;
|
||||
}
|
||||
|
||||
.formLabel {
|
||||
-fx-font-size: 14px;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-padding: 3 0 5 0;
|
||||
-fx-font-size: 14px;
|
||||
-fx-text-fill: #ffffff;
|
||||
-fx-padding: 3 0 5 0;
|
||||
}
|
||||
|
||||
.formInput {
|
||||
-fx-padding: 1px;
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #f4f4f4;
|
||||
-fx-border-color: #cccccc;
|
||||
-fx-border-radius: 8px;
|
||||
-fx-pref-width: 220px;
|
||||
-fx-transition: all 0.3s ease;
|
||||
-fx-padding: 1px;
|
||||
-fx-font-size: 14px;
|
||||
-fx-background-color: #f4f4f4;
|
||||
-fx-border-color: #cccccc;
|
||||
-fx-border-radius: 8px;
|
||||
-fx-pref-width: 220px;
|
||||
-fx-transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.formInput:focus {
|
||||
-fx-border-color: #8e44ad;
|
||||
-fx-border-color: #8e44ad;
|
||||
}
|
||||
|
||||
/* List Views */
|
||||
.cartList {
|
||||
-fx-background-color: rgba(156, 89, 182, 0.7);
|
||||
-fx-background-color: rgba(156, 89, 182, 0.7);
|
||||
}
|
||||
.paypal {
|
||||
-fx-background-image: url('icons/paypal.png');
|
||||
-fx-background-size: contain; /* Ensures the whole image is shown */
|
||||
-fx-background-repeat: no-repeat; /* Prevents the image from repeating */
|
||||
-fx-background-position: center; /* Centers the image */
|
||||
-fx-min-width: 100px;
|
||||
-fx-min-height: 100px; /* Ensures consistent height for the element */
|
||||
-fx-background-image: url("icons/paypal.png");
|
||||
-fx-background-size: contain; /* Ensures the whole image is shown */
|
||||
-fx-background-repeat: no-repeat; /* Prevents the image from repeating */
|
||||
-fx-background-position: center; /* Centers the image */
|
||||
-fx-min-width: 100px;
|
||||
-fx-min-height: 100px; /* Ensures consistent height for the element */
|
||||
}
|
||||
|
||||
.bill {
|
||||
-fx-background-image: url('icons/bill.png');
|
||||
-fx-background-size: contain;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-min-width: 100px;
|
||||
-fx-min-height: 100px;
|
||||
-fx-background-image: url("icons/bill.png");
|
||||
-fx-background-size: contain;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-min-width: 100px;
|
||||
-fx-min-height: 100px;
|
||||
}
|
||||
|
||||
.creditCard {
|
||||
-fx-background-image: url('icons/credit.png');
|
||||
-fx-background-size: contain;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-min-width: 100px;
|
||||
-fx-min-height: 100px;
|
||||
-fx-background-image: url("icons/credit.png");
|
||||
-fx-background-size: contain;
|
||||
-fx-background-repeat: no-repeat;
|
||||
-fx-background-position: center;
|
||||
-fx-min-width: 100px;
|
||||
-fx-min-height: 100px;
|
||||
}
|
||||
|
||||
/* Table Styling */
|
||||
.table-view {
|
||||
-fx-background-color: rgba(156, 89, 182, 0.7); /* Background color with transparency */
|
||||
-fx-border-color: #8e44ad; /* Border color */
|
||||
-fx-border-width: 2px; /* Border thickness */
|
||||
-fx-padding: 10px;
|
||||
-fx-alignment: center;
|
||||
-fx-font-size: 14px; /* Font size for text */
|
||||
-fx-font-weight: normal; /* Normal font weight */
|
||||
-fx-text-fill: #ffffff; /* White text */
|
||||
-fx-background-color: rgba(
|
||||
156,
|
||||
89,
|
||||
182,
|
||||
0.7
|
||||
); /* Background color with transparency */
|
||||
-fx-border-color: #8e44ad; /* Border color */
|
||||
-fx-border-width: 2px; /* Border thickness */
|
||||
-fx-padding: 10px;
|
||||
-fx-alignment: center;
|
||||
-fx-font-size: 14px; /* Font size for text */
|
||||
-fx-font-weight: normal; /* Normal font weight */
|
||||
-fx-text-fill: #ffffff; /* White text */
|
||||
}
|
||||
|
||||
/* Table Header */
|
||||
.table-view .column-header-background {
|
||||
-fx-background-color: #8e44ad; /* Header background */
|
||||
-fx-text-fill: white; /* Header text color */
|
||||
-fx-background-color: #8e44ad; /* Header background */
|
||||
-fx-text-fill: white; /* Header text color */
|
||||
}
|
||||
|
||||
/* Table Column Styling */
|
||||
.table-view .table-column {
|
||||
-fx-alignment: center-left; /* Align text to the left */
|
||||
-fx-padding: 8px 16px; /* Padding for columns */
|
||||
-fx-font-size: 14px; /* Font size for column headers */
|
||||
-fx-text-fill: #ffffff; /* White text */
|
||||
-fx-alignment: center-left; /* Align text to the left */
|
||||
-fx-padding: 8px 16px; /* Padding for columns */
|
||||
-fx-font-size: 14px; /* Font size for column headers */
|
||||
-fx-text-fill: #ffffff; /* White text */
|
||||
}
|
||||
|
||||
/* Table Cell Styling */
|
||||
.table-view .table-cell {
|
||||
-fx-background-color: transparent; /* Transparent background for cells */
|
||||
-fx-border-color: transparent; /* No border for cells */
|
||||
-fx-padding: 5px 10px; /* Padding for each cell */
|
||||
-fx-background-color: transparent; /* Transparent background for cells */
|
||||
-fx-border-color: transparent; /* No border for cells */
|
||||
-fx-padding: 5px 10px; /* Padding for each cell */
|
||||
}
|
||||
|
||||
/* Row Styling */
|
||||
.table-view .table-row-cell {
|
||||
-fx-background-color: rgba(156, 89, 182, 0.3); /* Semi-transparent row background */
|
||||
-fx-border-color: transparent; /* No border for rows */
|
||||
-fx-background-color: rgba(
|
||||
156,
|
||||
89,
|
||||
182,
|
||||
0.3
|
||||
); /* Semi-transparent row background */
|
||||
-fx-border-color: transparent; /* No border for rows */
|
||||
}
|
||||
|
||||
.table-view .table-row-cell:hover {
|
||||
-fx-background-color: rgba(156, 89, 182, 0.6); /* Darker row color on hover */
|
||||
-fx-background-color: rgba(156, 89, 182, 0.6); /* Darker row color on hover */
|
||||
}
|
||||
|
||||
/* Table Scroll Bar */
|
||||
.table-view .scroll-bar {
|
||||
-fx-background-color: #8e44ad; /* Scroll bar background color */
|
||||
-fx-background-color: #8e44ad; /* Scroll bar background color */
|
||||
}
|
||||
|
||||
/* Media Queries - Responsive Design */
|
||||
|
||||
/* For screens up to 1200px (large tablets and smaller desktops) */
|
||||
@media screen and(max-width: 1200px) {
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
}
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
}
|
||||
|
||||
.cardDiv {
|
||||
-fx-pref-width: 45%;
|
||||
-fx-min-width: 45%;
|
||||
-fx-pref-height: 220;
|
||||
-fx-min-height: 220;
|
||||
}
|
||||
.cardDiv {
|
||||
-fx-pref-width: 45%;
|
||||
-fx-min-width: 45%;
|
||||
-fx-pref-height: 220;
|
||||
-fx-min-height: 220;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
-fx-font-size: 24px;
|
||||
}
|
||||
.mainTitle {
|
||||
-fx-font-size: 24px;
|
||||
}
|
||||
|
||||
.footerCopy {
|
||||
-fx-font-size: 12px;
|
||||
}
|
||||
.footerCopy {
|
||||
-fx-font-size: 12px;
|
||||
}
|
||||
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 13px;
|
||||
-fx-padding: 7px 14px;
|
||||
}
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 13px;
|
||||
-fx-padding: 7px 14px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For screens up to 1024px (tablets and medium-sized devices) */
|
||||
@media screen and(max-width: 1024px) {
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
}
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
}
|
||||
|
||||
.cardDiv {
|
||||
-fx-pref-width: 48%;
|
||||
-fx-min-width: 48%;
|
||||
-fx-pref-height: 210;
|
||||
-fx-min-height: 210;
|
||||
}
|
||||
.cardDiv {
|
||||
-fx-pref-width: 48%;
|
||||
-fx-min-width: 48%;
|
||||
-fx-pref-height: 210;
|
||||
-fx-min-height: 210;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
-fx-font-size: 24px;
|
||||
}
|
||||
.mainTitle {
|
||||
-fx-font-size: 24px;
|
||||
}
|
||||
|
||||
.footerCopy {
|
||||
-fx-font-size: 12px;
|
||||
}
|
||||
.footerCopy {
|
||||
-fx-font-size: 12px;
|
||||
}
|
||||
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 14px;
|
||||
-fx-padding: 8px 15px;
|
||||
}
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 14px;
|
||||
-fx-padding: 8px 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For screens up to 768px (mobile devices and small tablets) */
|
||||
@media screen and(max-width: 768px) {
|
||||
#main {
|
||||
-fx-hgap: 10;
|
||||
-fx-vgap: 10;
|
||||
}
|
||||
#main {
|
||||
-fx-hgap: 10;
|
||||
-fx-vgap: 10;
|
||||
}
|
||||
|
||||
.cardDiv {
|
||||
-fx-pref-width: 100%;
|
||||
-fx-min-width: 100%;
|
||||
-fx-pref-height: 180;
|
||||
-fx-min-height: 180;
|
||||
}
|
||||
.cardDiv {
|
||||
-fx-pref-width: 100%;
|
||||
-fx-min-width: 100%;
|
||||
-fx-pref-height: 180;
|
||||
-fx-min-height: 180;
|
||||
}
|
||||
|
||||
.cardTitel {
|
||||
-fx-font-size: 16px;
|
||||
-fx-background-color: #000;
|
||||
}
|
||||
.cardTitel {
|
||||
-fx-font-size: 16px;
|
||||
-fx-background-color: #000;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
-fx-font-size: 12px;
|
||||
}
|
||||
.cardText {
|
||||
-fx-font-size: 12px;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
-fx-font-size: 22px;
|
||||
}
|
||||
.mainTitle {
|
||||
-fx-font-size: 22px;
|
||||
}
|
||||
|
||||
.footerCopy {
|
||||
-fx-font-size: 10px;
|
||||
}
|
||||
.footerCopy {
|
||||
-fx-font-size: 10px;
|
||||
}
|
||||
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 6px 12px;
|
||||
}
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 6px 12px;
|
||||
}
|
||||
}
|
||||
|
||||
/* For screens up to 480px (very small screens like smartphones in portrait mode) */
|
||||
@media screen and(max-width: 480px) {
|
||||
#main {
|
||||
-fx-hgap: 5;
|
||||
-fx-vgap: 5;
|
||||
}
|
||||
#main {
|
||||
-fx-hgap: 5;
|
||||
-fx-vgap: 5;
|
||||
}
|
||||
|
||||
.cardDiv {
|
||||
-fx-pref-width: 100%;
|
||||
-fx-min-width: 100%;
|
||||
-fx-pref-height: 150;
|
||||
-fx-min-height: 150;
|
||||
}
|
||||
.cardDiv {
|
||||
-fx-pref-width: 100%;
|
||||
-fx-min-width: 100%;
|
||||
-fx-pref-height: 150;
|
||||
-fx-min-height: 150;
|
||||
}
|
||||
|
||||
.cardTitel {
|
||||
-fx-font-size: 14px;
|
||||
}
|
||||
.cardTitel {
|
||||
-fx-font-size: 14px;
|
||||
}
|
||||
|
||||
.cardText {
|
||||
-fx-font-size: 10px;
|
||||
}
|
||||
.cardText {
|
||||
-fx-font-size: 10px;
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
-fx-font-size: 18px;
|
||||
}
|
||||
.mainTitle {
|
||||
-fx-font-size: 18px;
|
||||
}
|
||||
|
||||
.footerCopy {
|
||||
-fx-font-size: 8px;
|
||||
}
|
||||
.footerCopy {
|
||||
-fx-font-size: 8px;
|
||||
}
|
||||
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 5px 10px;
|
||||
}
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 5px 10px;
|
||||
}
|
||||
|
||||
.formTitle,
|
||||
.cartTitle {
|
||||
-fx-font-size: 20px;
|
||||
}
|
||||
.formTitle,
|
||||
.cartTitle {
|
||||
-fx-font-size: 20px;
|
||||
}
|
||||
|
||||
.formInput {
|
||||
-fx-pref-width: 200px;
|
||||
}
|
||||
.formInput {
|
||||
-fx-pref-width: 200px;
|
||||
}
|
||||
|
||||
.footerHeading {
|
||||
-fx-font-size: 16px;
|
||||
}
|
||||
.footerHeading {
|
||||
-fx-font-size: 16px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +0,0 @@
|
|||
com/example/CheckOutController.class
|
||||
com/example/App.class
|
||||
com/example/CartController.class
|
||||
module-info.class
|
||||
com/example/ShopController.class
|
||||
com/example/RegisterController.class
|
||||
com/example/LoginController.class
|
||||
com/example/CartController$Item.class
|
||||
|
|
@ -1,7 +1,9 @@
|
|||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/Item.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/RegisterController.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/CheckOutController.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/CartController.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/App.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/LoginController.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/ShopController.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/com/example/Account.java
|
||||
/home/sage/Desktop/Programming/IMS-java/Code/ost/JAVA-FX-PROJECT/_javafx_website_task/src/main/java/module-info.java
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue