PAIN.CSS
This commit is contained in:
parent
04c687bd2a
commit
7836821c51
2 changed files with 74 additions and 48 deletions
|
|
@ -18,7 +18,7 @@
|
|||
-fx-border-color: #8e44ad;
|
||||
-fx-border-width: 0 0 2px 0;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
|
||||
-fx-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
-fx-background-color: #6a1b9a;
|
||||
-fx-padding: 25px;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1);
|
||||
-fx-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footerHeading {
|
||||
|
|
@ -45,7 +45,9 @@
|
|||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
.footerText, .footerLink, .footerCopy {
|
||||
.footerText,
|
||||
.footerLink,
|
||||
.footerCopy {
|
||||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +70,7 @@
|
|||
.cardDiv {
|
||||
-fx-background-color: rgba(156, 89, 182, 0.7);
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-border-radius: 12px;
|
||||
-fx-background-radius: 12px;
|
||||
-fx-padding: 15;
|
||||
|
|
@ -83,7 +85,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.cardTitel {
|
||||
-fx-font-size: 18px;
|
||||
-fx-font-weight: 600;
|
||||
|
|
@ -163,7 +164,7 @@
|
|||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 16px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
|
@ -173,35 +174,41 @@
|
|||
}
|
||||
|
||||
/* Header Buttons */
|
||||
.cartBtn, .loginBtn {
|
||||
.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: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cartBtn:hover, .loginBtn:hover {
|
||||
.cartBtn:hover,
|
||||
.loginBtn:hover {
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
.btnCreateAccount, .btnLogin, .btnCheckOut {
|
||||
.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: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btnCreateAccount:hover, .btnLogin:hover, .btnCheckOut:hover {
|
||||
.btnCreateAccount:hover,
|
||||
.btnLogin:hover,
|
||||
.btnCheckOut:hover {
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
|
|
@ -213,7 +220,7 @@
|
|||
-fx-background-radius: 20px;
|
||||
-fx-padding: 10px 20px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
|
@ -223,7 +230,8 @@
|
|||
}
|
||||
|
||||
/* Forms */
|
||||
.formTitle, .cartTitle {
|
||||
.formTitle,
|
||||
.cartTitle {
|
||||
-fx-font-size: 26px;
|
||||
-fx-font-weight: 700;
|
||||
-fx-text-fill: #6a1b9a;
|
||||
|
|
@ -231,7 +239,7 @@
|
|||
-fx-padding: 10 0 20 0;
|
||||
}
|
||||
|
||||
.cartTitle{
|
||||
.cartTitle {
|
||||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -342,7 +350,7 @@
|
|||
/* Media Queries - Responsive Design */
|
||||
|
||||
/* For screens up to 1200px (large tablets and smaller desktops) */
|
||||
@media screen and (max-width: 1200px) {
|
||||
@media screen and(max-width: 1200px) {
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
|
|
@ -363,14 +371,15 @@
|
|||
-fx-font-size: 12px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.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) {
|
||||
@media screen and(max-width: 1024px) {
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
|
|
@ -391,14 +400,15 @@
|
|||
-fx-font-size: 12px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.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) {
|
||||
@media screen and(max-width: 768px) {
|
||||
#main {
|
||||
-fx-hgap: 10;
|
||||
-fx-vgap: 10;
|
||||
|
|
@ -428,14 +438,15 @@
|
|||
-fx-font-size: 10px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.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) {
|
||||
@media screen and(max-width: 480px) {
|
||||
#main {
|
||||
-fx-hgap: 5;
|
||||
-fx-vgap: 5;
|
||||
|
|
@ -464,12 +475,14 @@
|
|||
-fx-font-size: 8px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 5px 10px;
|
||||
}
|
||||
|
||||
.formTitle, .cartTitle {
|
||||
.formTitle,
|
||||
.cartTitle {
|
||||
-fx-font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
-fx-border-color: #8e44ad;
|
||||
-fx-border-width: 0 0 2px 0;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0px 5px 15px rgba(0, 0, 0, 0.1);
|
||||
-fx-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.mainTitle {
|
||||
|
|
@ -35,7 +35,7 @@
|
|||
-fx-background-color: #6a1b9a;
|
||||
-fx-padding: 25px;
|
||||
-fx-alignment: center;
|
||||
-fx-box-shadow: 0px -5px 15px rgba(0, 0, 0, 0.1);
|
||||
-fx-box-shadow: 0 -5px 15px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.footerHeading {
|
||||
|
|
@ -45,7 +45,9 @@
|
|||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
.footerText, .footerLink, .footerCopy {
|
||||
.footerText,
|
||||
.footerLink,
|
||||
.footerCopy {
|
||||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -68,7 +70,7 @@
|
|||
.cardDiv {
|
||||
-fx-background-color: rgba(156, 89, 182, 0.7);
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-border-radius: 12px;
|
||||
-fx-background-radius: 12px;
|
||||
-fx-padding: 15;
|
||||
|
|
@ -83,7 +85,6 @@
|
|||
}
|
||||
|
||||
|
||||
|
||||
.cardTitel {
|
||||
-fx-font-size: 18px;
|
||||
-fx-font-weight: 600;
|
||||
|
|
@ -163,7 +164,7 @@
|
|||
-fx-background-radius: 20px;
|
||||
-fx-padding: 8px 16px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
|
@ -173,35 +174,41 @@
|
|||
}
|
||||
|
||||
/* Header Buttons */
|
||||
.cartBtn, .loginBtn {
|
||||
.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: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.cartBtn:hover, .loginBtn:hover {
|
||||
.cartBtn:hover,
|
||||
.loginBtn:hover {
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
/* Form Buttons */
|
||||
.btnCreateAccount, .btnLogin, .btnCheckOut {
|
||||
.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: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.btnCreateAccount:hover, .btnLogin:hover, .btnCheckOut:hover {
|
||||
.btnCreateAccount:hover,
|
||||
.btnLogin:hover,
|
||||
.btnCheckOut:hover {
|
||||
-fx-background-color: #732d91;
|
||||
}
|
||||
|
||||
|
|
@ -213,7 +220,7 @@
|
|||
-fx-background-radius: 20px;
|
||||
-fx-padding: 10px 20px;
|
||||
-fx-border-color: transparent;
|
||||
-fx-border-width: 0px;
|
||||
-fx-border-width: 0;
|
||||
-fx-cursor: hand;
|
||||
-fx-transition: background-color 0.3s ease;
|
||||
}
|
||||
|
|
@ -223,7 +230,8 @@
|
|||
}
|
||||
|
||||
/* Forms */
|
||||
.formTitle, .cartTitle {
|
||||
.formTitle,
|
||||
.cartTitle {
|
||||
-fx-font-size: 26px;
|
||||
-fx-font-weight: 700;
|
||||
-fx-text-fill: #6a1b9a;
|
||||
|
|
@ -231,7 +239,7 @@
|
|||
-fx-padding: 10 0 20 0;
|
||||
}
|
||||
|
||||
.cartTitle{
|
||||
.cartTitle {
|
||||
-fx-text-fill: #ffffff;
|
||||
}
|
||||
|
||||
|
|
@ -342,7 +350,7 @@
|
|||
/* Media Queries - Responsive Design */
|
||||
|
||||
/* For screens up to 1200px (large tablets and smaller desktops) */
|
||||
@media screen and (max-width: 1200px) {
|
||||
@media screen and(max-width: 1200px) {
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
|
|
@ -363,14 +371,15 @@
|
|||
-fx-font-size: 12px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.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) {
|
||||
@media screen and(max-width: 1024px) {
|
||||
#main {
|
||||
-fx-hgap: 15;
|
||||
-fx-vgap: 15;
|
||||
|
|
@ -391,14 +400,15 @@
|
|||
-fx-font-size: 12px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.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) {
|
||||
@media screen and(max-width: 768px) {
|
||||
#main {
|
||||
-fx-hgap: 10;
|
||||
-fx-vgap: 10;
|
||||
|
|
@ -428,14 +438,15 @@
|
|||
-fx-font-size: 10px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.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) {
|
||||
@media screen and(max-width: 480px) {
|
||||
#main {
|
||||
-fx-hgap: 5;
|
||||
-fx-vgap: 5;
|
||||
|
|
@ -464,12 +475,14 @@
|
|||
-fx-font-size: 8px;
|
||||
}
|
||||
|
||||
.cartBtn, .loginBtn {
|
||||
.cartBtn,
|
||||
.loginBtn {
|
||||
-fx-font-size: 12px;
|
||||
-fx-padding: 5px 10px;
|
||||
}
|
||||
|
||||
.formTitle, .cartTitle {
|
||||
.formTitle,
|
||||
.cartTitle {
|
||||
-fx-font-size: 20px;
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue